background相关属性及缩写属性

最新推荐文章于 2024-09-23 11:30:52 发布

远方有只兔子~

最新推荐文章于 2024-09-23 11:30:52 发布

阅读量2.4k

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/qq_43812504/article/details/110791063

版权

html+css 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

背景缩写属性：

背景缩写属性可以在一个声明中设置所有的背景属性。

background: #00ff00 url('smiley.gif') no-repeat fixed center;

可以设置的属性分别是：background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image。
各值之间用空格分隔，不分先后顺序。
可以只有其中的某些值，例如 background：＃FF0000 url(smiley.gif); 是允许的。

1.background-color:

body
{
    background-color:yellow;
}
h1
{
    background-color:#00ff00;
}
p
{
    background-color:rgb(255,0,255);
}

2.background-image

背景图片：background-image:url('paper.gif');
属性值： url(背景地址)

3.background-repeat

背景图片的平铺方式，默认：会水平垂直都铺满

属性值：

          repeat-x
 	      repeat-y
 	      repeat (x,y都进行平铺)
 	      no-repeat(都不平铺)

4.background-position

背景图片的位置
属性值： x y
（1） xpos ypos：都为正值时，往右往下移动
（2） 还可以用单词(如果仅指定一个关键字，其他值将会是"center")
x:left center right
y:top center bottom
（3） 百分比：x% y% 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。。默认值为：0％0％

5.background-attachment

背景图随滚动条的移动方式

属性值

      fixed 固定，不随内容一块滚动；
 	  scroll:随内容一块滚动。

6.background-size

属性值：background-size:80px 60px;规定图片大小
x y
（1）设置背景图片高度和宽度（10px 30px）。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动);
（2）将计算相对于背景定位区域的百分比(30% 30%)。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
（3）cover:此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。背景图不会变形，但是超出区域会被裁减掉。
（4）contain:此时会保持图像的纵横比并将图像缩放成适合背景定位区域的最大大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            background: url(../images/mn1.jpg) no-repeat;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述
修改 background-size: 300px 300px;

修改：background-size: 100% 100%;

修改：background-size: cover;被裁减

修改：background-size:contain ;
在这里插入图片描述

7.background-origin

规定 background-position 属性相对于什么位置来定位。设置背景图片开始摆放的起始点
```
 	如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。
```
属性值：background-origin: padding-box(默认)|border-box|content-box;

padding-box: 从内边距开始摆放，为默认值
border-box: 从边框开始摆放
content-box:从内容区域开始摆放

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        div {
            border: 10px dashed black;
            padding: 35px;
            background-image: url(../images/app4.png);
            background-repeat: no-repeat;
            background-position: left;
        }

        #div1 {
            background-origin: border-box;
            /* 从边框开始摆放*/
        }

        #div2 {
            background-origin: content-box;
            /* 从content开始摆放*/
        }

        #div3 {
            background-origin: padding-box;
            /* 从内边距开始摆放，为默认值*/
        }
    </style>
</head>

<body>

    <p>背景图像边界框的相对位置：</p>
    <div id="div1">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
        suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </div>

    <p>背景图像的相对位置的内容框：</p>
    <div id="div2">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
        suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </div>
    <p>背景图像的padding的内容框：</p>
    <div id="div3">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
        suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </div>

</body>

</html>

在这里插入图片描述

8.background-clip属性：

background-clip:指定背景绘制区域。

属性值：

 border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
 padding-box	背景绘制在衬距方框内（剪切成衬距方框，超出padding就裁剪掉）。
 content-box	背景绘制在内容方框内（剪切成内容方框,超出内容就裁剪）。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        div {
            border: 10px dotted black;
            padding: 35px;
            background: yellow;
        }

        #example1 {
            background-clip: border-box;
            /* 默认值 */
        }

        #example2 {
            background-clip: padding-box;
        }

        #example3 {
            background-clip: content-box;
        }
    </style>
</head>

<body>
    <p>没有背景剪裁 (border-box没有定义):</p>
    <div id="example1">
        <h2>Lorem Ipsum Dolor</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
            dolore magna aliquam erat volutpat.</p>
    </div>

    <p>background-clip: padding-box:</p>
    <div id="example2">
        <h2>Lorem Ipsum Dolor</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
            dolore magna aliquam erat volutpat.</p>
    </div>

    <p>background-clip: content-box:</p>
    <div id="example3">
        <h2>Lorem Ipsum Dolor</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
            dolore magna aliquam erat volutpat.</p>
    </div>

</body>

</html>