ItAnswer

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 3405|回复: 0

CSS3 背景

[复制链接]

7

主题

7

帖子

1036

积分

金牌会员

Rank: 6Rank: 6

积分
1036
发表于 2020-12-25 14:41:56 | 显示全部楼层 |阅读模式
CSS3 中包含几个新的背景属性,提供更大背景元素控制。
在本章您将了解以下背景属性:
  • background-image
  • background-size
  • background-origin
  • background-clip
CSS3 background-image属性
CSS3中可以通过background-image属性添加背景图片。
不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。
  1. <div style="background-image: url(img/img_flwr.gif), url(img/paper.gif);
  2.             background-position: right bottom, left top;
  3.             background-repeat: no-repeat, repeat;">
  4.      <br>
  5.      <br>
  6.      <br>
  7.      <br>
  8.      <br>
  9.      <br>
  10. </div>
复制代码
可以给不同的图片设置多个不同的属性
  1. background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
复制代码
CSS3 background-size 属性
background-size指定背景图像的大小。CSS3以前,背景图像大小由图像的实际大小决定。
CSS3中可以指定背景图片,让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
  1. <body style="background:url(img/img_flwr.gif);
  2.         background-size:80px 60px;
  3.         background-repeat:no-repeat;
  4.         padding-top:40px;">
  5. <p>
  6.     Lorem ipsum,中文又称“乱数假文”, 是指一篇常用于排版设计领域的拉丁文文章 ,主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
  7. </p>

  8. <p>原始图片: <img src="img/img_flwr.gif"  alt="Flowers" width="224" height="162"></p>

  9. </body>
复制代码
CSS3 的 background-origin 属性
background-origin 属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
CSS3 多个背景图像
CSS3 允许你在元素上添加多个背景图像。

  1. body
  2. {
  3.     background-image:url(img_flwr.gif),url(img_tree.gif);
  4. }
复制代码
CSS3 background-clip属性
CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
  1. #example1 {
  2.     border: 10px dotted black;
  3.     padding: 35px;
  4.     background: yellow;
  5.     background-clip: content-box;
  6. }
复制代码



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|ITAnswer ( 陕ICP备14007217号 )

GMT+8, 2024-3-29 15:23 , Processed in 0.041535 second(s), 23 queries .

Powered by ITAnswer! X3.4

Copyright © 2013-2020, Tencent Cloud.

快速回复 返回顶部 返回列表