当前位置:主页 > 查看内容

CSS背景

发布时间:2021-06-02 00:00| 位朋友查看

简介:CSS背景 背景颜色 背景图片位置 背景色半透明 背景颜色 !DOCTYPE html html lang en head meta charset UTF-8 / meta http-equiv X-UA-Compatible content IEedge / meta name viewport content widthdevice-width, initial-scale1.0 / title 背景颜色 / tit……

背景颜色

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>背景颜色</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        /* 背景颜色 */
        /* background-color: blue; 
         transparent是默认值 透明的 */

        /* 背景图片 */
        /* background-image: url(); 
          url() 括号里面填写图片地址
          默认none没有背景图片*/

        /* 背景不平铺 */
        /* background-repeat: no-repeat; */
        /* 默认背景平铺 */
        /* 沿着X轴/Y轴平铺 */
        /* background-repeat: repeat-x;
        background-repeat: repeat-y; */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

背景图片位置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>背景图片位置</title>
    <style>
      h3 {
        width: 200px;
        height: 50px;
        background-image: url(./csdn.png);
        background-repeat: no-repeat;
        /* 背景图片位置 */
        /* 背景位置方位名词 */
        background-position: center left;
        /* 方位名词部分顺序,只写一个另一个默认居中 */
        /* background-position: 20px 30px; */
        /* 精确位置第一个是X轴第二个是Y轴 */

        /* 背景图像固固定 */
        /* background-attachment: fixed; */
        /* 默认scroll 背景图片跟随对象内容滚动 */

        /* 背景复合性写法 */
        /* background: transparent url() repeat fixed top;
        color image repeat fixed position
        颜色    图片  平铺    滚动   位置 */

        text-indent: 10em;
        line-height: 50px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h3>csdn</h3>
  </body>
</html>

背景色半透明

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>背景色半透明</title>
    <style>
      div {
        width: 300px;
        height: 300px;
        background: rgba(0, 0, 0, 0.5);
        /* 0.5代表透明度是50% */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

在这里插入图片描述
ps:图片来自黑马程序员

;原文链接:https://blog.csdn.net/m0_56787796/article/details/115583830
本站部分内容转载于网络,版权归原作者所有,转载之目的在于传播更多优秀技术内容,如有侵权请联系QQ/微信:153890879删除,谢谢!
上一篇:一口Linux公众号粉丝过万总结 下一篇:没有了

推荐图文


随机推荐