编程大白话之-background(贰)

作者: Han涛_ | 来源:发表于2019-06-06 10:28 被阅读0次

今天接着上文继续来跟大家说说background的其余的四种属性。

background-attachment

background-size        *css3之后新增

background-origin        *css3之后新增

background-clip            *css3之后新增

background-attachment 设置背景图像是否固定或者随着页面的滚动效果

  1.background-attachment：scroll    滚动(默认)

背景图像会随着页面滚动条的滚动而移动

width: 600px;
height: 500px;
background-image:url(./img/u=231008047,2570173687&fm=26&gp=0.jpg);
background-attachment:scroll;

背景会固定在原有的位置上，当下拉滚动条时，背景将会被遮挡。

Han.PNG

  2.background-attachment：fixed    固定

当页面的滚动条滚动时，背景图像不会移动

.div {
        width: 600px;
        height: 500px;
        background-image: url(./img/u=231008047,2570173687&fm=26&gp=0.jpg);
        background-attachment: fixed; 
        }

不管内容有多少，下拉滚动条时，文字内容会随着页面下拉移动，但背景图片会一直保持在当前位置(看上去好像是固定在当前)

Han.PNG

background-size 设置背景图片的大小

1.background-size：auto    自动(保持图片的原大小尺寸)

.div {
        width: 600px;
        height: 500px;
        border: 10px solid #333;
        background-image: url(./img/u=231008047,2570173687&fm=26&gp=0.jpg);
        background-size: auto;
        }

背景图片没有盒子那么大，所以会自适应的将背景填满，但会出现多张

Han.PNG

设置背景图片可以用多种单位进行设置，例%，em, px 和auto
当我们只传入1个参数时，第2个参数会默认为auto,例如：
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

.div {
        width: 600px;
        height: 500px;
        border: 10px solid #333;
        background-image: url(./img/u=231008047,2570173687&fm=26&gp=0.jpg);
        background-size: 400px;
        }

Han.PNG

当我们传两个值时：
第一个值指定图片的宽度，第二个值指定图片的高度
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

.div {
        width: 600px;
        height: 500px;
        border: 10px solid #333;
        background-image: url(./img/u=231008047,2570173687&fm=26&gp=0.jpg);
        background-size: 50% 30em;
        }

Han.PNG

2.background-size:  cover    覆盖(会将图片拉伸覆盖整个盒子)

.div {
        width: 600px;
        height: 500px;
        border: 10px solid #333;
        background-image: url(./img/u=231008047,2570173687&fm=26&gp=0.jpg);
        background-size: cover;
        }

为了可以让大家看的清除，我给盒子加了10px的边框

Han.PNG

3.background-size:  contain    单向延伸
(调整单方向伸缩时，另一方向保持不变,保持图片的长宽比例)

 .div {
        width: 600px;
        height: 500px;
        border: 10px solid #333;
        background-image: url(./img/u=231008047,2570173687&fm=26&gp=0.jpg);
        background-size: contain;
        }

Han.PNG

特殊情况，可同时设置多张背景图片的属性值，特殊情况时为大家示范。

background-origin 设置图片原点位置

1.background-origin：padding-box    内边距作为原点位置(默认值)

.div {
            width: 500px;
            height: 300px;
            background-color: blue;
            background-repeat: no-repeat;
            border: 30px solid rgba(0,255,0,0.2);
            padding: 30px;
            background-image: url(./img/u=3824055283,515774918&fm=26&gp=0.jpg);
            background-origin: padding-box;
        }

padding-box(作为默认值)，从padding区域的左上角开始显示。

Han.PNG

2.background-origin：border-box    边框作为原点位置

.div {
            width: 500px;
            height: 300px;
            background-color: blue;
            background-repeat: no-repeat;
            border: 30px solid rgba(0,255,0,0.2);
            padding: 30px;
            background-image: url(./img/u=3824055283,515774918&fm=26&gp=0.jpg);
            background-origin: border-box;
        }

背景图像从 border 区域的左上角开始显示，当为边框设置透明度后，背景图像和边框相叠加，透过边框可以看见背景图像

Han.PNG

3.background-origin：content-box    内容区域作为原点位置

.div {
            width: 500px;
            height: 300px;
            background-color: blue;
            background-repeat: no-repeat;
            border: 30px solid rgba(0,255,0,0.5);
            padding: 30px;
            background-image: url(./img/u=3824055283,515774918&fm=26&gp=0.jpg);
            background-origin: content-box;
        }

背景图像从 content区域的左上角开始显示。

Han.PNG

当内边距为0时，padding-box 与 content-box 的效果相同。

background-clip 图片的裁切方式

 1.background-clip：border-box    (默认值)  从边框位置开始向内裁切

border的区域也有背景图，但是背景图图片是从border-top和border-left的位置开始平铺的 (下面发两种情况，给大家进行一下对比)

.div {
            width: 500px;
            height: 300px;
            background-color: blue;
            background-repeat: no-repeat;
            border: 30px solid rgba(0,255,0,0.3);
            padding: 30px;
            background-image: url(./img/u=3824055283,515774918&fm=26&gp=0.jpg);
            background-clip: border-box;
        }

Han.PNG

只有当背景repeat的时候，border-top和border-left才是背景图，并且border-top的背景是从图片的下边开始平铺，border-left的背景是从图片的右边开始平铺。

 .div {
            width: 500px;
            height: 300px;
            background-color: blue;
            /* background-repeat: no-repeat; */
            border: 30px solid rgba(0,255,0,0.3);
            padding: 30px;
            background-image: url(./img/u=3824055283,515774918&fm=26&gp=0.jpg);
            background-clip: border-box;
        }

Han.PNG

 2.background-clip: padding-box    从内边距位置（包括padding-box区域）开始向内裁切

边框下面没有背景，背景延伸到内边距外沿

.div {
            width: 500px;
            height: 300px;
            background-color: blue;
            background-repeat: no-repeat;
            border: 30px solid rgba(0,255,0,0.3);
            padding: 30px;
            background-image: url(./img/u=3824055283,515774918&fm=26&gp=0.jpg);
            background-clip: padding-box;
        }

Han.PNG

 3.background-clip: content-box    在中间内容（包括content-box区域）开始向内裁切

下图中背景图片的起始位置没有变化，但显示的位置从内边距开始(白色边框为内边距)，内边距覆盖的地方没有显示，进行了裁切。

.div {
            width: 500px;
            height: 300px;
            background-color: blue;
            background-repeat: no-repeat;
            border: 30px solid rgba(0,255,0,0.3);
            padding: 30px;
            background-image: url(./img/u=3824055283,515774918&fm=26&gp=0.jpg);
            background-clip: content-box;
        }

Han.PNG

 4.background-clip: text      以文字的形式进行裁切

个人认为text是这个属性的重要 ‘人物’ ，终于要登场了
我们先看一个直接设置属性后的效果

.div {
            width: 500px;
            height: 300px;
            background-repeat: content;
            background-image: url(./img/u=3824055283,515774918&fm=26&gp=0.jpg);
            background-clip: text;
            font-size: 90px;
            font-weight: bold;
        }

Han.PNG

好像看上去并没有什么不同，和我们平时在文字后面添加背景图片没区别，别着急让我们稍微修改一个属性

.div {
            width: 500px;
            height: 300px;
            background-repeat: content;
            background-image: url(./img/u=3824055283,515774918&fm=26&gp=0.jpg);
            font-size: 90px;
            font-weight: bold;
            
            -webkit-background-clip: text;
            color: transparent;
        }

Han.PNG

在这里将字体颜色变为透明色，给 background-clip: text; 添加了前缀-webkit-，瞬间就让CSS变得不那么枯燥了。

text，是chrome特有的属性，所以使用时需要加上前缀-webkit-,由于text的值在其它的浏览器不生效的情况下，为了兼容，就需要用到color属性，为字体定义颜色。以便在其它浏览器中查看时不会显示的太过简单。

Han.PNG

到这里background的基本属性都已经说完了，其实了解了这些属性后可以做很多的设置，而将某些属性进行搭配使用的话，会得到意想不到的的效果。
好了那么我们下一篇见吧，一起去看看background的复合属性的复合使用方法！

网友评论

本文标题：编程大白话之-background(贰)

本文链接：https://www.haomeiwen.com/subject/amblxctx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

编程大白话之-background(贰)

background-attachment 设置背景图像是否固定或者随着页面的滚动效果

background-size 设置背景图片的大小

background-origin 设置图片原点位置

background-clip 图片的裁切方式

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读