CSS：background

最新推荐文章于 2023-03-07 18:02:23 发布

Bridge_go

最新推荐文章于 2023-03-07 18:02:23 发布

阅读量307

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/breakbridge/article/details/107185869

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

background （背景）

值	说明	CSS
background-color	指定要使用的背景颜色	1
background-position	指定背景图片的位置	1
background-size	指定背景图片的大小	3
background-repeat	指定如何重复背景图片	1
background-origin	指定背景图片的定位区域	3
background-clip	指定背景图像的绘画区域	3
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	指定要使用的一个或多个背景图片	1

背景缩写属性可以在一个声明中设置所有的背景属性。可以设置的属性分别是：background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image。各值之间用空格分隔，不分先后顺序。可以只有其中的某些值，例如 background：＃FF0000 URL（smiley.gif); 是允许的。

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

若需同时设置position和size，应该 position/size 以‘/’分开，position在前，单独的表示position；
因为origin和clip的枚举值都为 border-box,padding-box和content-box。当background中只有3个值中1个时表示将origin和clip都设为这个值，当有2个时，第一个值表示origin，第二个表示clip；
若使用简记法，未列出的属性将使用默认值；

例：若设置 background-position:10px 10px;background-size:20px 20px; 缩写为：background:10px 10px/20px 20px;

1. background-clip

对绘画区域进行设置，就设置背景色的范围

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #example1 { border: 10px dotted black; padding: 20px; background: yellow; }
        #example2 { border: 10px dotted black; padding: 20px; background: yellow; background-clip: padding-box; }
        #example3 { border: 10px dotted black; padding: 20px; background: yellow; background-clip: content-box; }
    </style>
</head>
<body>
    <p>border-box（默认）</p>
    <div id="example1">
        <h2>Lorem Ipsum Dolor</h2>
    </div>

    <p>background-clip: padding-box</p>
    <div id="example2">
        <h2>Lorem Ipsum Dolor</h2>
    </div>

    <p>background-clip: content-box</p>
    <div id="example3">
        <h2>Lorem Ipsum Dolor</h2>
    </div>

</body>
</html>

2.background-origin

对图片位置进行设置，针对图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #example1 { background: yellow url('smiley.gif') no-repeat; background-origin: padding-box; border: 10px dotted; padding: 30px; }
        #example2 { background: yellow url('smiley.gif') no-repeat; background-origin: border-box; border: 10px dotted; padding: 30px; }
        #example3 { background: yellow url('smiley.gif') no-repeat; background-origin: content-box; border: 10px dotted; padding: 30px; }
    </style>
</head>
<body>

    <p>padding-box（默认）</p>
    <div id="example1">
        <h2>Lorem Ipsum Dolor</h2>
    </div>

    <p>background-clip: border-box</p>
    <div id="example2">
        <h2>Lorem Ipsum Dolor</h2>
    </div>

    <p>background-clip: content-box</p>
    <div id="example3">
        <h2>Lorem Ipsum Dolor</h2>
    </div>

</body>
</html>

3. 同时运用origin和clip

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #example1 { border: 10px dotted black; padding: 20px; background: content-box yellow url('smiley.gif') no-repeat; }
        #example2 { border: 10px dotted black; padding: 20px; background: padding-box border-box yellow url('smiley.gif') no-repeat; }
        #example3 { border: 10px dotted black; padding: 20px; background: border-box padding-box yellow url('smiley.gif') no-repeat; }
    </style>
</head>
<body>
    <p>content-box</p>
    <div id="example1">
        <h2>Lorem Ipsum Dolor</h2>
    </div>

    <p>background-origin:padding-box; background-clip: border-box;</p>
    <div id="example2">
        <h2>Lorem Ipsum Dolor</h2>
    </div>

    <p>background-origin:border-box; background-clip: padding-box;</p>
    <div id="example3">
        <h2>Lorem Ipsum Dolor</h2>
    </div>

</body>
</html>

Bridge_go

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS：background

background （背景）值说明 CSS background-color 指定要使用的背景颜色 1 background-position 指定背景图像的位置 1 background-size 指定背景图片的大小 3 background-repeat 指定如何重复背景图像 1 background-origin 指定背景图像的定位区域 3 background-clip 指定背景图像的绘.
复制链接

扫一扫