CSS3 背景图像的位置

谁践踏了优雅 2024-02-17 20:59 7阅读 0赞

**一、background-origin 指定背景图像的位置区域**

![Center][]

![Center 1][]

**二、background-clip指定绘图区的背景**

![Center 2][]

**index.html**

<style type="text/css">
     div:nth-of-type(1){
    	 width:100px;
    	 height:90px;
    	 padding:50px;
    	 border:30px dashed #000; /* 虚线 */
    	 background:#CCC url(0.png) no-repeat;
    	 -webkit-background-origin:border;  /*指背景显示的区域 */ 
    	 margin:30px;
     }
     
    /* 当background-origin的值为border，而background-clip的值为padding时，虽然背景是从边框区域开始绘制的，但因为设定了边框不显示背景，所以本来属于边框的那一部分背景就不会显示出来，就好像背景图片被裁剪了一部分一样*/
      div:nth-of-type(2){
    	 width:100px;
    	 height:90px;
    	 padding:50px;
    	 border:30px dashed #000; /* 虚线 */
    	 background:#CCC url(0.png) no-repeat;
    	 -webkit-background-origin:border;  /*指背景显示的区域 */
    	 -webkit-background-clip:padding;  /*指定了背景在哪些区域可以显示  */
    	  margin:30px;
     }
    
    </style>
    </head>
    
    <body>
    <div></div>
    <div></div>
    </body>

**效果**

**![Center 3][]**

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/9d6255ecc57c440ca9e54904538e21f2.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/70f5112d64f74b238ac6abc3529cca94.png
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/37ac367d18f3492abeb5e4555df0cc6a.png
[Center 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f6c5b6010c1b4f1fa18b4ee5877818d9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

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

相关阅读

相关如何用CSS去除图像的背景

只需一行CSS代码，您就可以实现这种效果，而不需要任何花哨的软件或复杂的工具。在这个适合初学者的指南中，我们将逐步介绍使用 CSS 删除图像背景的步骤。这是我的 html...

迷南。/ 2024年05月07日 22:15/ 0 赞/ 62 阅读

相关 CSS3 背景

一、background-image属性设置一个元素的背景图像。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。默认情况下，background-image放

你的名字/ 2024年02月17日 20:59/ 0 赞/ 25 阅读

相关 CSS3 背景图像的位置

一、background-origin 指定背景图像的位置区域 ![Center][] ![Center 1][] 二、background-clip指定绘图

谁践踏了优雅/ 2024年02月17日 20:59/ 0 赞/ 8 阅读

相关背景图片的位置（HTML、CSS）

背景图片的位置（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head> <m

冷不防/ 2023年10月03日 12:44/ 0 赞/ 21 阅读

相关 CSS背景——背景颜色、背景图片、背景平铺、背景图像位置、背景图像固定、背景图像半透明

CSS背景 CSS可以通过背景属性给页面元素添加样式背景背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。背景颜色 backgro

短命女/ 2022年11月20日 08:17/ 0 赞/ 238 阅读

相关 CSS 背景图像

CSS 背景图像文章目录 CSS 背景图像 CSS 背景图像还可以为特定元素设置背景图像 ![在这里插入图片描述][20210

- 日理万妓/ 2022年11月12日 09:38/ 0 赞/ 214 阅读

相关（CSS入门）css添加+背景图像+背景重复

css添加当浏览器读到样式表时，它将根据样式表中的信息来格式化 HTML 文档。三种使用 CSS 的方法有三种插入样式表的方法：外部css

布满荆棘的人生/ 2022年09月03日 02:29/ 0 赞/ 253 阅读

相关 CSS3背景图像属性

CSS3背景图像属性目录： CSS3背景图像区域 CSS3背景图像定位 CSS3背景图像大小 CSS3多重背景图像 CSS3背景属性整合

缺乏、安全感/ 2022年05月14日 08:54/ 0 赞/ 347 阅读

相关 css3圆角、边界图片、盒子阴影、背景大小、填充位置、定位位置、背景颜色渐变

1. css3圆角：border-radius （1）这是个复合属性：比如：border-radius：10px； == border-radius：10px 10px 1

我就是我/ 2022年05月10日 11:24/ 0 赞/ 269 阅读

相关【CSS3】背景

CSS3 背景 CSS3中包含几个新的背景属性，提供更大背景元素控制。在本章您将了解以下背景属性： ![在这里插入图片描述][2019030514214541.

冷不防/ 2022年03月12日 06:48/ 0 赞/ 302 阅读