CSS基本样式之背景

最新推荐文章于 2024-03-06 20:44:31 发布

Blockchain Explorer

最新推荐文章于 2024-03-06 20:44:31 发布

阅读量254

点赞数

分类专栏： CSS/CSS3 文章标签： CSS背景 background-repeat background background-position background-size

本文链接：https://blog.csdn.net/TDCQZD/article/details/82353123

版权

CSS/CSS3 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一、css2之background-color

CSS属性中的 background-color 会设置元素的背景色。

语法：

background-color: red;
        初始值 transparent
        是否是继承属性 否

二、 css2之background-image

CSS background-image属性用于为一个元素设置一个或多个背景图像，图像在绘制时，以z轴方向堆叠的方式进行。先指定的图像会在之后指定的图像上面进行绘制。

语法：

background-image: url(http://www.example.com/bck.png);
            初始值 none
            是否是继承属性 否

三、 css2之background-repeat

background-repeat CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

语法：

background-repeat: repeat;
        初始值 repeat
        是否是继承属性 否

取值：
repeat
图像会按需重复来覆盖整个背景图片所在的区域. 最后一个图像会被裁剪, 如果它的大小不合适的话
no-repeat：
图像不会被重复(背景图像所在的区域可能没有完全被覆盖).

四、 css2之background-position

background-position 指定背景图片的初始位置。
语法：

background-position: 25px 75px;
            初始值：0%  0%
            是否继承：否

取值：

                px值
                关键字
                    left | center | right | top | bottom
                百分比

注意：
百分比的参照尺寸为背景图片定位区域的大小减去背景图片的大小。
如果只有一个值被指定，则这个值就会默认设置背景图片位置中的水平方向，与此同时垂直方向的默认值被设置成50%。

代码示例：

<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #app{
                width: 200px;
                height: 200px;
                padding: 50px;
                border: 10px solid rgba(0,0,0,0.3); 
                margin:50px;
                overflow: auto;
                background-color: pink;
                background-image:url(./img/tg.png);
                background-repeat:no-repeat ;
                background-position: 10% 10%;
                /*background-position: 8px 1.2px ;*/

                /*百分比参照于  背景容器的尺寸 -背景图片的尺寸 */
                /*300 300  - 220 288*/
                /*80 12*/
            }
        </style>
    </head>
    <body>
        <div id="app"></div>
    </body>

五、 css3 之 background-origin

background-origin 规定了指定背景图片background-image 属性的原点位置
语法：

    background-origin: content-box;
            初始值 padding-box
            是否是继承属性 否

取值：
border-box：背景图片的摆放以border区域为参考
padding-box：背景图片的摆放以padding区域为参考
content-box：背景图片的摆放以content区域为参考

代码示例：

<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #test{
                margin: 100px auto;
                width: 200px;
                height: 200px;
                padding: 100px;
                border: 10px solid rgba(0,0,0,.4);
                background-image: url(tg.png);
                background-origin: content-box;
                background-clip:content-box ;
            }
        </style>
    </head>
    <body>
        <div id="test">

        </div>
    </body>

六、css3 之 background-clip

background-clip 设置元素的背景剪裁的起始位置

语法：

background-clip: border-box
        初始值 border-box
        是否是继承属性 否

取值：
border-box:背景延伸到边框外沿（但是在边框之下）。
padding-box:边框下面没有背景，即背景延伸到内边距外沿。
content-box:背景裁剪到内容区 (content-box) 外沿。
text:背景被裁剪为文字的前景色(只有chrome支持)。

代码示例：

    <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #app{
                width: 100px;
                height: 100px;
                padding: 50px;
                border: 10px solid rgba(0,0,0,0.3); 
                margin:50px;
                overflow: auto;
                background-color: pink;
                background-image:url(./img/tg.png);
                background-repeat:no-repeat ;
                background-position: 0 0;

                /*pc五大主流
                    谷歌
                    欧朋
                        BLINK(Webkit的衍生版)
                    苹果
                        Webkit
                    火狐
                        Gecko
                    IE
                        Trident


                    BLINK，Webkit (postcss)
                        -webkit-
                    Gecko
                        -moz-
                    Trident
                        -ms-
                */

                -webkit-background-clip:text ;

                font: 50px/100px "微软雅黑";
                font-weight: bold;
                color: rgba(255, 192, 203,.5);
            }
        </style>
    </head>
    <body>
        <div id="app">

        </div>
    </body>

七、 css3 之 background-size

background-size 设置背景图片大小
语法：

background-size: 50% 25%
    初始值 auto auto
    是否是继承属性 否

取值：

      px值
      百分比值

注意
<percentage> 值，指定背景图片相对背景区的百分比。背景区由background-origin设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框

代码示例：

<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #test{
                margin: 100px auto;
                width: 100px;
                height: 100px;
                border: 1px solid;
                background-image: url(avatar.jpg);
                background-size:100%;
                background-size:100% auto;
                /*background-size:100% 100%;*/
            }
        </style>
    </head>
    <body>
        <div id="test">

        </div>
    </body>

八、background简写属性

此属性是一个简写属性，可以在一次声明中定义一个或多个属性：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size
对于所有简写属性，任何没有被指定的值都会被设定为它们的初始值。

background: red;
background:
url("https://mdn.mozillademos.org/files/11983/starsolid.gif")  norepeat;

九、雪碧图&css精灵

Blockchain Explorer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基本样式之背景

一、css2之background-colorCSS属性中的 background-color 会设置元素的背景色。语法：background-color: red; 初始值 transparent 是否是继承属性否二、 css2之background-imageCSS background-image属性用于为一个元素设置一个或多个背景...
复制链接

扫一扫

专栏目录