【HTML/CSS】背景颜色图片

这东西就像ps的图层，有些东西背景层是不能动的
通过增加的图层就可以解决问题。

背景的设置

相关属性

  • background-color rgb

  • background-imageurl，输入图片的地址

  • background-position可用：center top bottom left right // px值

  • background-repeat repeat或者no-repeat，是否通过平铺来填满整个背景空间

  • background-attachment背景是否可以滚动？fixed 固定 scroll 可以滚动

  • background-size用这个设置背景大小 可以是精确大小 也可以是百分比 可用cover contain

点击查看-示例程序-代码 
<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                width: 30%;

                background-image: url(https://picsum.photos/id/1043/1920/604);
                background-size: contain;
                /*
                    用这个设置背景大小 可以是精确大小 也可以是百分比
                    用contain cover等预设可以用
                    cover 强行拉伸
                    contain 保证全部显示，但是可能有空余    
                */
                font-size: 100px;
                opacity: 0.5;/*透明度 注意 用这个的话 其中的字也会半透明*/
            }
            body {/*body相当于图层的底层*/
                background-color: darkblue;
                background-image: url(https://picsum.photos/id/1043/1920/1080);
                background-position: center top;/*可用：center top bottom left right // px值*/
                background-repeat: no-repeat;
                background-attachment: scroll;/*fixed 固定 scroll 可以滚动*/
            }
        </style>
    </head>
    <body>
        <p>123123123</p>
        <p>123123123</p>
        <p>123123123</p>
        <p>123123123</p>
        <p>123123123</p>
        <p>123123123</p>
        <p>123123123</p>
        <p>123123123</p>
        <p>123123123</p>
        <p>123123123</p>
        <p>123123123</p>
        <p>123123123</p>
        <p>123123123</p>
        <p>123123123</p>
        <p>123123123</p>
        <p>123123123</p>
        <p>123123123</p>
        <p>123123123</p>
    </body>
</html>
点击查看-示例程序2-代码 
<!DOCTYPE html>
<html>
    <head>

        <title>背景案例</title>
        
        <style>
            a {
                width: 100px;
                height: 50px;
                display: inline-block;
                text-decoration: none;
                color: black;
                font: 700 30px "microsoft yahei";
                text-align: center;
                line-height: 50px;/*设行高等于盒子高度，可以让文字垂直居中*/
            }
            a:hover {
                color: white;
                background-color: red;
            }
        </style>
    </head>
    <body>
        
        <a href="https://www.baidu.com">Baidu</a>
        <a href="https://www.baidu.com">Baidu</a>
        <a href="https://www.baidu.com">Baidu</a>
        <a href="https://www.baidu.com">Baidu</a>
        <a href="https://www.baidu.com">Baidu</a>
        <a href="https://www.baidu.com">Baidu</a>
    </body>
</html>
posted @ 2022-02-07 12:27  Jedi_Pz  阅读(116)  评论(0)    收藏  举报