css:背景颜色、图片、平铺、背景固定、背景颜色半透明

1、背景颜色默认为transparent(透明)(1)将背景设置为greenyellow

css:背景颜色、图片、平铺、背景固定、背景颜色半透明

1、背景颜色

默认为transparent(透明)

(1)将背景设置为greenyellow:

<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 150px;
                background-color: greenyellow;
            }        </style>
    </head>

    <body>
        <div>今天是星期一</div>
    </body></html>

1392562-20200601072306958-994440672.png

2、背景图片

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 150px;
                background-image: url(img/back.jpg);
            }        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

1392562-20200601072929200-1153784475.png

3、背景平铺

如果要在html页面上对背景进行平铺,可以使用background-repeat属性,属性的值有:repeat、no-repeat、repeat-x、repeat-y,默认情况下是平铺的

(1)平铺:

<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 400px;
                height: 300px;
                background-image: url(img/back.jpg);
                background-repeat: repeat;
            }        </style>
    </head>

    <body>
        <div></div>
    </body></html>

1392562-20200601073532643-680541857.png

(2)延x轴平铺:

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 400px;
                height: 300px;
                background-image: url(img/back.jpg);
                background-repeat: repeat-x;
            }        </style>
    </head>
    <body>
        <div></div>
    </body></html>


(3)延y轴平铺:

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 400px;
                height: 300px;
                background-image: url(img/back.jpg);
                background-repeat: repeat-y;
            }        </style>
    </head>
    <body>
        <div></div>
    </body></html>

1392562-20200601073657632-291694125 (1).png

4、背景图片的位置

可以使用方位名词(top、center、bottom、left、center、right,如果是方位名词,两个位置名词不区分先后顺序)或者精确单位

(1)方位名词

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 400px;
                height: 300px;
                background-image: url(img/back.jpg);
                background-repeat: no-repeat;
                background-position: center top;
            }        </style>
    </head>
    <body>
        <div></div>
    </body></html>


1392562-20200601080015940-1028561955.png

 (2)精确单位(xy坐标又先后顺序)


<html> 
   <head>   
        <meta charset="utf-8">    
        <title></title>
                
          <style> 
          div{
           width: 400px;                
           height: 300px;                
           background-image: url(img/back.jpg);                
           background-repeat: no-repeat;               
            background-position: 25px 40px;            
            }        
            </style>    
            </head>    
            <body>        
            <div></div>    
            </body></html>

1392562-20200601081728424-971161489.png

 (3)混合单位

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 400px;
                height: 300px;
                background-image: url(img/back.jpg);
                background-repeat: no-repeat;
                background-position: center 40px;
                background-color: pink;
            }        </style>
    </head>
    <body>
        <div></div>
    </body></html>

1392562-20200601081941119-1903628541.png

5、背景固定

background-attachment:当属性的值定义为scroll的时候背景图片随对象的内容滚动;当定义为fixed的时候,背景图片固定

(1)一般的书写方式

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body{
                width: 400px;
                height: 1300px;
                background-image: url(img/back.jpg);
                background-repeat: repeat;
                background-position: center 40px;
                color:red;
                background-attachment: fixed;
                
            }        </style>
    </head>
    <body>
        <p>下雪了!!!</p>
        <p>下雪了!!!</p>
        <p>下雪了!!!</p>
        <p>下雪了!!!</p>
        <p>下雪了!!!</p>
        <p>下雪了!!!</p>
        <p>下雪了!!!</p>
        <p>下雪了!!!</p>
        <p>下雪了!!!</p>
        <p>下雪了!!!</p>
        <p>下雪了!!!</p>
        <p>下雪了!!!</p>
    </body></html>

1392562-20200601083633887-317763500.png

当滚动鼠标的时候,文字滚动,图片不动

(2)复合性的书写方式:

上面的css代码可以简写为:


<style>
            body{
                width: 400px;
                height: 1300px;
                background: url(img/back.jpg) repeat fixed center 40px;
                color:red;    
            }        </style>


没有先后顺序的要求

 

6、背景颜色半透明

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 300px;
                background: rgba(0,0,0,0.2);
                        }        </style>
    </head>
    <body>
       <div>半透明显示</div>
    </body></html>


1392562-20200601085151266-189033909.png

文章来源: 搜其一
本文地址: https://www.soqiy.com/a/13.html
声明:本文收集转载自互联网,版权归原作者所有,转载目的在于传递更多的信息,并不代表本网站的观点和立场。如发现本站文章存在内容、版权或其它问题,烦请联系Email:xuxlc@qq.com ,我们将及时删除。
上一篇
下一篇

为您推荐

联系我们

联系我们

在线咨询: QQ交谈

邮箱: xuxlc@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部