马黑黑 发表于 2022-9-12 12:16

background简写

语法：

background: / [ background-size] ;

各个参数的含义：

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


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


加林森 发表于 2022-9-12 13:01

来学习！

马黑黑 发表于 2022-9-12 13:32

本帖最后由 马黑黑 于 2022-9-12 13:33 编辑 <br /><br /><style>
#dd123 {
        margin: 50px auto 0;
        width: 600px;
        height: 100px;
        background: linear-gradient(to right, tomato, skyblue,orange, snow) 100% 100% / 200% 100%;
        animation: bgMerge 10s linear infinite;
}
@keyframes bgMerge {
        from { background-position: 0 0; }
        to { background-position: -100% 0; }
}

</style>

<p>举个栗子：</p>
<div id="dd123"></div>
<p><br><br>代码在楼下</p>

马黑黑 发表于 2022-9-12 13:33

楼上代码

<style>
#dd123 {
        margin: 50px auto 0;
        width: 600px;
        height: 100px;
        background: linear-gradient(to right, tomato, skyblue,orange, snow) 100% 100% / 200% 100%;
        animation: bgMerge 10s linear infinite;
}
@keyframes bgMerge {
        from { background-position: 0 0; }
        to { background-position: -100% 0; }
}

</style>

<div id="dd123"></div>

红影 发表于 2022-9-12 14:09

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

马黑黑 发表于 2022-9-12 15:08

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

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

红影 发表于 2022-9-12 19:45

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

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

红影 发表于 2022-9-12 19:49

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

马黑黑 发表于 2022-9-12 20:11

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

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

马黑黑 发表于 2022-9-12 20:11

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

之前解释过

梦缘 发表于 2022-9-12 20:15

学习了解老师的分享，感谢老师！{:4_187:}

马黑黑 发表于 2022-9-12 20:53

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

{:4_190:}

红影 发表于 2022-9-12 22:04

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

感觉中是讲过的，现在又迷糊了{:4_173:}

马黑黑 发表于 2022-9-12 22:10

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

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

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

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

红影 发表于 2022-9-13 19:42

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

background-positio ...

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

马黑黑 发表于 2022-9-13 19:42

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

反正体会好了就行

红影 发表于 2022-9-13 21:42

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

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

马黑黑 发表于 2022-9-13 22:14

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

也好
页: [1]
查看完整版本: background简写