background简写

马黑黑

语法：

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

各个参数的含义：

background-color 背景颜色，如 #000 | black | rgba(0,0,0,.5)
background-image 背景图像，如 url('图片地址') | linear-gradient
background-repeat 如何重复背景图像，如 repeat | repeatX | repeatY | no-repeat
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-position 背景图像的位置，如 100% 100% | 0px 2px
background-size 背景图片大小，如 100% 100%
background-origin 背景图片的定位区域
background-clip 背景的绘制区域


background简写参数中，一般我们最常用的是 color、image、repeat、position / size，例如：


background: olive url('123.png') no-repeat center / cover


所列参数，不是必须用齐。

加林森

来学习！

马黑黑

举个栗子：

代码在楼下

马黑黑

楼上代码

1. 
   
2. <style>
   
3. #dd123 {
   
4.         margin: 50px auto 0;
   
5.         width: 600px;
   
6.         height: 100px;
   
7.         background: linear-gradient(to right, tomato, skyblue,orange, snow) 100% 100% / 200% 100%;
   
8.         animation: bgMerge 10s linear infinite;
   
9. }
   
10. @keyframes bgMerge {
    
11.         from { background-position: 0 0; }
    
12.         to { background-position: -100% 0; }
    
13. }
    
14. 
    
15. </style>
    
16. 
    
17. <div id="dd123"></div>

复制代码

红影

这个变化效果很奇特。100% 100% / 200% 100%是什么？和动画里位置又是什么关系？为什么渐变的分布是不是原来的样子了呢？
原来对background不知道的还有好多

马黑黑

红影 发表于 2022-9-12 14:09
这个变化效果很奇特。100% 100% / 200% 100%是什么？和动画里位置又是什么关系？为什么渐变的分布是不是原 ...

/ 左边的是位置；右边的是背景大小。背景预设从 0 移动到 -100%，所以设置背景长度长一点。

红影

马黑黑 发表于 2022-9-12 15:08
/ 左边的是位置；右边的是背景大小。背景预设从 0 移动到 -100%，所以设置背景长度长一点。

原来斜杠是这个意思。
这个空间有点想象不出来。从 0 移动到 -100%为什么是向右走呢？

红影

试了一下，从 0 移动到 200%就是往左走，怎么跟我想象中的是反的？

马黑黑

红影 发表于 2022-9-12 19:49
试了一下，从 0 移动到 200%就是往左走，怎么跟我想象中的是反的？

不久前在CSS图片精灵里解释过 background 的特性

马黑黑

红影 发表于 2022-9-12 19:45
原来斜杠是这个意思。
这个空间有点想象不出来。从 0 移动到 -100%为什么是向右走呢？

之前解释过

梦缘

学习了解老师的分享，感谢老师！

马黑黑

梦缘 发表于 2022-9-12 20:15
学习了解老师的分享，感谢老师！

红影

马黑黑 发表于 2022-9-12 20:11
不久前在CSS图片精灵里解释过 background 的特性

感觉中是讲过的，现在又迷糊了

马黑黑

红影 发表于 2022-9-12 22:04
感觉中是讲过的，现在又迷糊了

这个呢，你先不要放动画里，就单独设置 background 的位置，比较下面两句的差异：

background-position: 100px 0;
background-position: -100px 0;

暂时禁用动画的方法：比如 @keyframes 名称为 bgMerge，你在它后面加个 1，bgMerge1 ，它就不能运行了

红影

马黑黑 发表于 2022-9-12 22:10
这个呢，你先不要放动画里，就单独设置 background 的位置，比较下面两句的差异：

background-positio ...

X是100%出现的是后半部分的颜色。

马黑黑

红影 发表于 2022-9-13 19:42
X是100%出现的是后半部分的颜色。

反正体会好了就行

红影

马黑黑 发表于 2022-9-13 19:42
反正体会好了就行

嗯，这个暂时弄不明白了，以后遇到同类的再说了

马黑黑

红影 发表于 2022-9-13 21:42
嗯，这个暂时弄不明白了，以后遇到同类的再说了

也好