CSS3背景相关属性大全

其他 2020-02-19 10:33:23 阅读次数: 0

基本背景属性の使用

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html" ;charset="utf-8"/>
    <title>背景属性</title>
    <style type="text/css">
      div {
        border: 1px solid #000;
        height: 100px;
        width:  300px;
      }
    </style>
  </head>
  <body>
    <!--绿色背景-->
    <div style="background-color:#92e900;">
      background-color:#92e900
    </div>
    <!--以默认样式指定背景图片，将会在横向、纵向上平铺-->
    <div style="background-image:url(dog.jpg);">
      background-image:url(dog.jpg)
    </div>
    <!--不平铺的背景图片-->
    <div style="background-image:url(dog.jpg);background-repeat:no-repeat;">
      background-image:url(dog.jpg)
      background-repeat:no-repeat
    </div>
    <!--仅横向平铺的背景图片-->
    <div style="background-image:url(dog.jpg);background-repeat:repeat-x;">
      background-image:url(dog.jpg)
      background-repeat:repeat-x
    </div>
    <!--不平铺的背景图片，并指定背景图片位置-->
    <div style="background-image:url(dog.jpg);background-repeat:no-repeat;background-position:35% 80%;">
      background-image:url(dog.jpg)
      background-repeat:no-repeat
      background-position:35% 80%
    </div>
    <!--不平铺的背景图片，并指定背景图片位置-->
    <div style="background-image:url(dog.jpg);background-repeat:no-repeat;background-position:30px 8px;">
      background-image:url(dog.jpg)
      background-repeat:no-repeat
      background-position:30px 8px
    </div>
    <!--不平铺的背景图片，并指定背景图片位置-->
    <div style="background-image:url(dog.jpg);background-repeat:no-repeat;background-position:center bottom;">
      background-image:url(dog.jpg)
      background-repeat:no-repeat
      background-position:center bottom
    </div>
  </body>
</html>

在这里插入图片描述

背景图片的固定

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html" ;charset="utf-8"/>
    <title>背景固定</title>
  </head>
  <body style="background-image:url(dog.jpg); background-attachment:fixed">
    <ul style="font-size:30pt;color:red">
      <script type="text/javascript">
        for (var i = 0; i < 20; i++) {
          document.writeln("<li>这柴犬颜色有点深啊</li>");
        }
      </script>
    </ul>
  </body>
</html>

在这里插入图片描述

CSS3新增的background-clip属性の使用

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html" ;charset="utf-8"/>
    <title>背景属性</title>
    <style type="text/css">
      div {
        border:  10px dotted #444;
        padding: 12px;
        height:  30px;
        width:   300px;
      }
    </style>
  </head>
  <body>
    <!--粉色背景-->
    <div style="background-color:#ff6aa1;">
      background-color:#ff6aa1
    </div>
    <!--以默认样式指定背景图片，将会在横向、纵向上平铺-->
    <div style="background-image:url(dog.jpg);">
      background-image:url(dog.jpg)
    </div>
    <!--指定背景覆盖盒模型的边框区、内填充区、内容区-->
    <div style="background-image:url(dog.jpg);background-clip:no-clip;">
      background-image:url(dog.jpg)
      background-clip:no-clip
    </div>
    <!--指定背景覆盖盒模型的内填充区、内容区-->
    <div style="background-image:url(dog.jpg);background-clip:padding-box;">
      background-image:url(dog.jpg)
      background-clip:padding-box
    </div>
    <!--指定背景覆盖盒模型的内容区-->
    <div style="background-image:url(dog.jpg);background-clip:content-box;">
      background-image:url(dog.jpg)
      background-clip:content-box
    </div>
  </body>
</html>

在这里插入图片描述

CSS3新增的background-origin属性の使用

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html" ;charset="utf-8"/>
    <title>背景属性</title>
    <style type="text/css">
      div {
        border: 12px dotted #444;
        height: 120px;
        width:  300px;
      }
    </style>
  </head>
  <body>
    <!--柚色背景-->
    <div style="background-color:#ff6a51;">
      background-color:#ff6a51
    </div>
    <!--背景图片从内容区开始覆盖-->
    <div style="background-image:url(dog.jpg);background-origin:content-box;background-repeat:no-repeat;">
      background-image:url(dog.jpg)
      background-origin:content-box
      background-repeat:no-repeat
    </div>
    <!--背景图片从内填充区开始覆盖-->
    <div style="background-image:url(dog.jpg);background-origin:padding-box;background-repeat:no-repeat;">
      background-image:url(dog.jpg)
      background-origin:padding-box
      background-repeat:no-repeat
    </div>
    <!--背景图片从边框区开始覆盖-->
    <div style="background-image:url(dog.jpg);background-origin:border-box;background-repeat:no-repeat;">
      background-image:url(dog.jpg)
      background-origin:border-box
      background-repeat:no-repeat
    </div>
  </body>
</html>

在这里插入图片描述

CSS3新增的background-size属性の使用

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html" ;charset="utf-8"/>
    <title>背景属性</title>
    <style type="text/css">
      div {
        border: 12px dotted #444;
        height: 70px;
        width:  300px;
      }
    </style>
  </head>
  <body>
    <!--以默认样式指定背景图片，将会在横向、纵向上平铺-->
    <div style="background-image:url(dog.jpg);">
      background-image:url(dog.jpg)
    </div>
    <!--背景图片宽度与元素宽度相同、高度为元素高度的80%-->
    <div style="background-image:url(dog.jpg);background-size:100% 80%;">
      background-image:url(dog.jpg)
      background-size:100% 80%
    </div>
    <!--背景图片宽度为元素宽度的30%、高度保持纵横比缩放-->
    <div style="background-image:url(dog.jpg);background-size:30% auto">
      background-image:url(dog.jpg)
      background-size:30% auto
    </div>
    <!--背景图片宽度保持纵横比缩放、高度为元素高度的50%-->
    <div style="background-image:url(dog.jpg);background-size:auto 50%;">
      background-image:url(dog.jpg)
      background-size:auto 50%
    </div>
    <!--背景图片宽度为60px、高度为30px-->
    <div style="background-image:url(dog.jpg);background-size:60px 30px;">
      background-image:url(dog.jpg)
      background-size:60px 30px
    </div>
    <!--背景图片宽度为40px、高度保持纵横比缩放-->
    <div style="background-image:url(dog.jpg);background-size:40px auto;">
      background-image:url(dog.jpg)
      background-size:40px auto
    </div>
    <!--背景图片宽度保持纵横比缩放、高度为20px-->
    <div style="background-image:url(dog.jpg);background-size:auto 20px;">
      background-image:url(dog.jpg)
      background-size:auto 20px
    </div>
  </body>
</html>

在这里插入图片描述

CSS3为background-repeat新增的space和roundの使用

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html" ;charset="utf-8"/>
    <title>背景属性</title>
    <style type="text/css">
      div {
        height: 150px;
        width:  300px;
        background-image:url(dog.jpg);
      }
    </style>
  </head>
  <body>
    换行警告
    <!--以默认样式指定背景图片，将会在横向、纵向上平铺-->
    <div>
      background-image:url(dog.jpg)
    </div>
    换行警告
    <!--不平铺的背景图片-->
    <div style="background-repeat:round;">
      background-image:url(dog.jpg)
      background-repeat:round
    </div>
    换行警告
    <!--仅横向平铺的背景图片-->
    <div style="background-repeat:space;">
      background-image:url(dog.jpg)
      background-repeat:space
    </div>
  </body>
</html>

在这里插入图片描述

CSS3新增的多背景图片の使用

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html" ;charset="utf-8"/>
    <title>背景属性</title>
    <style type="text/css">
      div {
        border:1px solid #000;
        height:200px;
        width:500px;
        background-image: url(dog.jpg), url(dog2.jpg), url(dog3.jpg);
        background-repeat: repeat-y, repeat-x, repeat;
        background-position: center top, left bottom, left top;
      }
    </style>
  </head>
  <body>
    <div id="div"></div>
  </body>
</html>

在这里插入图片描述

图片使用——柴犬

dog.jpg

在这里插入图片描述

dog2.jpg

在这里插入图片描述

dog3.jpg

在这里插入图片描述

进阶的JFarmer
发布了538 篇原创文章 · 获赞 1098 · 访问量 27万+
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_43896318/article/details/104348254
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022