CSS背景

最新推荐文章于 2022-10-30 18:01:18 发布

溯琳

最新推荐文章于 2022-10-30 18:01:18 发布

阅读量2k

点赞数 6

分类专栏： web 文章标签： html css

本文链接：https://blog.csdn.net/m0_56787796/article/details/115583830

版权

web 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

CSS背景

背景颜色
背景图片位置
背景色半透明
背景图片大小

背景颜色

<!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>