前端技术前沿5

迈不过友情╰ 2021-09-19 12:24 409阅读 0赞

CSS3 背景
CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。

background-size
background-origin

调整背景图片的大小：

  1. div
  2. {
  3. background:url(bg_flower.gif);
  4. -moz-background-size:63px 100px; /* 老版本的 Firefox */
  5. background-size:63px 100px;
  6. background-repeat:no-repeat;
  7. }

对背景图片进行拉伸，使其完成填充内容区域：

  1. div
  2. {
  3. background:url(bg_flower.gif);
  4. -moz-background-size:40% 100%; /* 老版本的 Firefox */
  5. background-size:40% 100%;
  6. background-repeat:no-repeat;
  7. }

CSS3 background-origin 属性
background-origin 属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

背景图片的定位区域

在 content-box 中定位背景图片：

  1. div
  2. {
  3. background:url(bg_flower.gif);
  4. background-repeat:no-repeat;
  5. background-size:100% 100%;
  6. -webkit-background-origin:content-box; /* Safari */
  7. background-origin:content-box;
  8. }

请点赞！因为你的鼓励是我写作的最大动力！

官方微信公众号

吹逼交流群：711613774

吹逼交流群

发表评论

表情：
评论列表 （有 0 条评论，409人围观）

还没有评论，来说两句吧...

相关阅读

    相关 前端技术前沿10

    允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NP

    水深无声水深无声/ 0 赞/ 475 阅读