龙空技术网

初识CSS-背景属性

箐声挽摘星 153

前言:

而今小伙伴们对“css半透明背景色”都比较珍视,大家都想要分析一些“css半透明背景色”的相关文章。那么小编在网络上汇集了一些关于“css半透明背景色””的相关资讯,希望我们能喜欢,咱们一起来了解一下吧!

通过CSS背景属性,可以给页面元素添加背景样式。

背景属性可设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景颜色

background-color:rgb值或颜色单词;

默认背景颜色值为transparent(透明)。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>背景属性</title>    <style>        div {            width: 300px;            height: 300px;            border: 1px solid;        }        /* 背景颜色 */        .bg-color {            background-color: transparent;        }        .bg-color-trans {            text-align: center;            background-color: pink;            width: 100px;            height: 100px;            line-height: 100px;        }    </style></head><body>    <div class="bg-color">背景颜色        <div class="bg-color-trans">透明背景</div>    </div></body></html>

效果:

背景图片

Background-image:图片路径URL;

默认背景图片值为none。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>背景属性</title>    <style>        div {            width: 300px;            height: 300px;            border: 1px solid;        }        .bg-image {            background-image: url(../images/meitizhub.jpg);        }    </style></head><body>        <div class="bg-image">背景图片</div>    </body></html>

效果:

背景平铺

background-repeat:repeat | no-repeat | repeat-x | repeat-y

background-repeat:repeat;

默认情况下背景图片状态为平铺,指的是图片会从左向右且从上到下整个铺满盒子。

background-repeat:no-repeat;

关闭默认平铺状态,只在盒子左上角显示一个完整的背景图片。

background-repeat:repeat-x;

沿着x轴方向在盒子内最顶部横向平铺背景图片。

background-repeat:repeat-y;

沿着y轴方向在盒子内最左侧纵向平铺背景图片。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>背景属性</title>    <style>        div {            width: 300px;            height: 300px;            border: 1px solid;        }        .bg-repeat {            background-repeat: no-repeat;        }    </style></head><body>    <div class="bg-image">背景平铺默认值</div>    <div class="bg-image bg-repeat">背景不平铺</div>    <div class="bg-image bg-repeatx">x轴方向平铺背景图片</div>    <div class="bg-image bg-repeaty">y轴方向平铺背景图片</div></body></html>

效果:

背景图片位置

background-position:x y;

x轴和y轴的值可以是方位名词或者精确数值都可。

方位名词:top、bottom、center、left、right。

当属性值使用方位名词时如果只写一个值,则第二个值默认为居中状态。

当属性值使用精确数值时如果只写一个值,则默认是x轴方向的值,y轴方向默认垂直居中。

如果参数是方位词和精确单位混合使用时,默认第一个值是x值,第二个是y值。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>背景属性</title>    <style>        div {            width: 300px;            height: 300px;            border: 1px solid;        }        .bg-position {            background-repeat: no-repeat;            background-position: center top;        }        .bg-position2 {            background-repeat: no-repeat;            background-position: right;        }        .bg-position3 {            background-repeat: no-repeat;            background-position: 20px 50px;        }        .bg-position4 {            background-repeat: no-repeat;            background-position: 20px ;        }        .bg-position5 {            background-repeat: no-repeat;            background-position: 80px bottom ;        }    </style></head><body>    <div class="bg-image bg-position">背景图片存放位置1</div>    <div class="bg-image bg-position2">背景图片存放位置,设置一个值</div>    <div class="bg-image bg-position3">背景图片存放位置精确单位值</div>    <div class="bg-image bg-position4">背景图片存放位置精确单位值</div>    <div class="bg-image bg-position5">背景图片存放位置混合使用</div></body></html>

效果:

背景图像固定

background-attachment:scroll | fixed;

背景图像在页面的某一处固定不动或者随页面的其余部分滚动。可以制作视差滚动效果。

background-attachment:scroll ;

默认值,背景图像固定在页面上,随着滚动条滚动而移动。

background-attachment:fixed;

背景图像固定在某一区域,滚动条滑动时位置不变。

body {            background-image: url(../images/43619545307190.png);            background-repeat: no-repeat;            background-position: center top;            background-attachment: fixed;        }
背景属性复合写法

background:背景颜色、背景图片地址、背景平铺、背景图像滚动、背景图片位置;

没有特定书写顺序,按需使用属性。

背景颜色半透明

实现背景颜色半透明效果。

background:rgb(0,0,0, 0.3);

最后一个参数是alpha透明度,取值范围在0~1之间。

总结:

属性

定义

Background-color

背景颜色

Rgb值 | 十六进制 | 颜色英文单词

Background-image

背景图片

Url(图片路径)

Background-repeat

背景平铺

Repeat | no-repeat |repeat-x |repeat-y

Background-position

背景固定

x轴和y轴。方向名词或者精确数值

Background-attachment

背景附着

Scroll(固定在页面上)|

fixed(与滚动条固定)

背景复合写法

代码简洁

背景颜色、图片地址、平铺、

滚动、位置。

背景颜色半透明

显示效果

Background:rgba(0,0,0,0~1)

标签: #css半透明背景色 #css透明背景色 #css透明度ie