css样式学习【四】_css style样式exanple{}和#example{}有什么区别-优快云博客

背景样式

背景颜色设置 background-color

颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："red"

背景图片地址 background-image

background-image 属性设置一个元素的背景图像。

元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

值	说明
url('URL')	图像的URL
none	无图像背景会显示。这是默认

背景图片是否平铺 background-repeat

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image不会重复
inherit	指定background-repea属性设置应该从父元素继承

是否设置背景滚动 background-attachment

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。

背景图片位置 background-position

方位表示

水平表示 left 、center、right

垂直表示 top、center、bottom

如果仅指定一个关键字，其他值将会是"center"，不区分顺序

x% y%

x标识水平，y标识垂直，百分数值同时应用于元素和图像，默认为0% 0%

如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。

举例

<html>
<head>
<style type="text/css">
body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }
</style>
</head>

<body>

</body>

</html>

结果：

图片的66% 33%的点与元素body的66% 33%的点对应起来

长度值表示

与元素内边距区左上角的偏移。偏移点是图像的左上角。

举例：

设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

注意：

这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。

内容框相对定位的背景图片 background-orign

background-Origin属性指定background-position属性应该是相对位置。默认为padding-box

background-origin: padding-box|border-box|content-box;

如果背景图像background-attachment是"固定"，这个属性没有任何效果。

举例：

<!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 {
            border: 5px solid black;
            padding: 35px;
            background-image: url('images/smiley.gif');
            background-repeat: no-repeat;
            background-position: left;
        }
        #div1 {
            background-origin: border-box;
        }
        #div2 {
            background-origin: padding-box;
        }
        #div3 {
            background-origin: content-box;
        }
    </style>
</head>

<body>
    <p>背景图像边界框的相对位置：</p>
    <div id="div1"></div>
    <p>背景图像填充框的相对位置：</p>
    <div id="div2"></div>
    <p>背景图像的相对位置的内容框：</p>
    <div id="div3"></div>
</body>
</html>

结果

背景图片大小 background-size

background-size: length|percentage|cover|contain;

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

注意点

background-size属性，该属性可以设置背景图片的大小，该属性的值设置为绝对数值或者百分比时对background-position没有任何影响，当设置为contain/cover时就会产生影响，其中有一个值会无效。

background-size:contain 该属性会让背景图片宽度或高度适应父元素，如果要缩放的话是等比例缩放，背景图片绝对不会超出父元素

background-size:cover 该属性会让背景图片填满父元素，如果要缩放的话是等比例缩放，背景图片可能会超出父元素

当图片的宽度大于高度时，position的top值无效

当图片的宽度小于高度时，position的left值无效

指定背景绘制区域 background-clip

background-clip: border-box|padding-box|content-box; 默认值为border-box

举例：

<!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>
        #example1 {
            border: 10px dotted black;
            padding: 35px;
            background: yellow;
        }
        #example2 {
            border: 10px dotted black;
            padding: 35px;
            background: yellow;
            background-clip: padding-box;
        }
        #example3 {
            border: 10px dotted black;
            padding: 35px;
            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>

结果：

总结

属性	作用	值
background-color	背景颜色	预定义颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-attachment	背景附着	srcoll 滚动/fixed 固定
background-position	背景位置	length/percentage,px x坐标，y坐标
background-orign	背景图片相对元素的定位	padding-box\|border-box\|content-box ；默认padding-box
background-size	背景图片大小	length\|percentage\|cover\|contain
background-clip	指定背景绘画区域	border-box\|padding-box\|content-box; 默认值为border-box
背景简写	复合写法	背景颜色背景图片地址背景平铺背景滚动背景位置
背景色半透明	背景色半透明	background:rgba(0,0,0,0.3) 后面必须是四个值