border高度如何设置_CSS属性设置 -- 背景样式

Ⅰ background-color: -- 设置标签的背景颜色

• rgba(0,0,0,0.65); -- (红,緑,蓝三原色,透明度)只能给背景设置透明度
• opacity: 0.65; -- 改变整个标签的透明度

    <style>
        .box1 {background-color: rgb(23,231,155)}
        .box2 {background-color: rgba(23,231,155,0.5)}
        .box3 {background-color: blueviolet;opacity: 0.5;}
        .box4 {background-color: blueviolet}
    </style>

<p class="box1">得到了不该得到的，就会失去不该失去的。</p>
<p class="box2">行路之中路过一片树荫，并不意味着归属于这棵树。</p>
<p class="box3">有些梦想虽然遥不可及，但不是不可能实现。只要我足够的强。</p>
<p class="box4">星星为什么这么渺小？“那是因为他们把自己放的太高了！”</p>

Ⅱ background-image: --设置标签的背景图片

• url("图片网址"); -- 如果图片的大小没有标签大，那么会自动在水平和锤子方向平铺和填充

    <style>
        .box1 {
            width: 500px ;
            height: 500px;
            background-image: url("ksyx.png");
            }
    </style>

<div class="box1"></div>

Ⅲ background-size: -- 设置宽、高

• 300px 300px; -- 第一个参数为宽度,第二个为高度
• 100% 100%; -- 设置跟随网页比例变化
• npx; -- 只写一个默认是图片的宽度,高度会同比例自动改变

Ⅳ background-repeat: -- 平铺方式

• no-repeat; -- #不重复，背景图片将仅显示一次
• repeat-x; -- #背景图片将在水平方向平铺
• repeat-y; -- #背景图片将在垂直方向平铺
• 可以在服务端将一个大图片截成小图片，然后在客户端基于平铺属性将小图重复
• 这样用户就以为是一张大图，如此，既节省了流量提升了速度，又不影响用户访问
• 例如很多网站的导航条都是用这种手法制作的

    <style>
        .box1 {
            width: 500px;
            height: 500px;
            background-image: url("ksyx.png");
            background-repeat: no-repeat;
            border: 1px solid blueviolet;
        }
        .box2 {
            width: 500px;
            height: 500px;
            background-image: url("ksyx.png");
            background-repeat: repeat-x;
            border: 3px solid blueviolet;

        }
        .box3 {
            width: 500px;
            height: 500px;
            background-image: url("ksyx.png");
            background-repeat: repeat-y;
            border: 3px solid blueviolet;
        }
    </style>

<div class="box1"></div>
<hr>
<div class="box2"></div>
<hr>
<div class="box3"></div>

Ⅴ background-attachment: -- 背景图片固定或滚动

• scroll; -- #默认值，背景图片不会随着滚动条的滚动而滚动
• fixed; -- #会随着滚动条的滚动而滚动

    <style>
        .box1 {
            width: 500px;
            height: 500px;
            background-image: url("ksyx.png");
            background-repeat: no-repeat;
            border: 1px solid blueviolet;
            background-attachment: scroll;
        }
        .box2 {
            width: 500px;
            height: 500px;
            background-image: url("ksyx.png");
            background-repeat: repeat-x;
            border: 3px solid blueviolet;
            background-attachment: fixed;
        }
    </style>

<div class="box1"></div>
<hr>
<div class="box2"></div>
<hr>
<div class="box3"></div>

默认不会自动给滚动

设置自动滚动

Ⅵ background-position: -- 控制背景图片的位置

• background-position：水平方向的值，垂直方向的值;
• 方位名词
  • 水平方向：left，center，right
  • 垂直方向：top，center，bottom
  • 如果只设置了一个关键词，那么第二个值就是"center"
• 百分比
  • 第一个值是水平位置，第二个值是垂直位置
  • 左上角是 0% 0% , 右下角是 100% 100%
  • 如果只设置了一个值，另一个值就是50%
• 具体像素(一定要加px单位)
  • 例如：30px，50px等等
  • 第一个值是水平位置，第二个值是垂直位置。
  • 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位
  • 如果只设置了一个值，另一个值就是50%。
  • 可以混合使用%和position值
• inherit --设置从父元素继承background属性值

            background-position: 30px 30px;

            background-position: left bottom;

Ⅶ inherit -- 继承background

• inherit -- 设置从父元素继承background属性值
  • 以上背景属性的值均可以设置为inherit，代表从父元素继承background属性