码迷,mamicode.com
首页 > 其他好文 > 详细

有趣的background

时间:2018-08-24 20:02:38      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:形式   size   分享图片   tom   absolute   ati   bottom   边框   虚线   

前言

background是css的简写形式,可以一次性定义各种背景属性,包括color、image、origin、size,repeat方式等等。

background在活动项目中用的还是比较多的,例如布局图片、画具有规则图案的边框(类似虚线框的样式)等等。

 

background-color和background-image的区别

background-color的范围是以元素的边框的左上角为起点,右下角为止点。

background-image的范围是以padding边缘的左上角到border的右下角边缘为止。

 

决定背景绘图区域的两个因素

background-origin和background-clip:

background-orign确定相对定位位置;

background-clip决定了元素的背景(背景图片或颜色)是否延伸到边框下面,

background-clip的取值:

background-clip: border-box//延伸到边框外延
background-clip: padding-box//边框下面没有背景,即背景延伸到内边距外沿。
background-clip: content-box//背景裁剪到内容区 (content-box) 外沿
background-clip: inherit

 

利用background-clip画图

画虚线边框

1、不使用background-clip,直接使用border的dashed画虚线框。

技术分享图片

<div class="border-div">
		<style scoped>
			.border-div{
				  position: relative;
				  margin-top: 100px;
				  background:#9c27b0;
				  border:10px dashed #2196f3;
			}
			.border-div::after{
					content:"";
					position:absolute;
					top:0;
					left:0;
					bottom:0;
					right:0;
					background:#fff;
			}
		</style>
</div>

2、使用background-clip:padding-box,让背景色不延伸到边框上

技术分享图片

<div class="border-div2">
			<style scoped>
				.border-div2{
						position: relative;
						margin-top: 100px;
						background:#9c27b0;
						background-clip:padding-box;
						border:10px dashed #2196f3;
				}
				.border-div2::after{
						content:"";
						position:absolute;
						top:0;
						left:0;
						bottom:0;
						right:0;
						background:#fff;
				}
			</style>
 </div>

 

3、background-clip:content-clip的情况

技术分享图片

<div class="border-div3">
			有内容
			有内容
			有内容
			有内容
			有内容
			有内容
			有内容
			有内容
			有内容
			有内容
			有内容

				<style scoped>
					.border-div3{
							position: relative;
							margin-top: 100px;
							background:#9c27b0;
							background-clip:content-box;
							border:10px dashed #2196f3;
							padding: 10px;
							
					}
					.border-div3::after{
							content:"";
							position:absolute;
							top:0;
							left:0;
							bottom:0;
							right:0;
							/* background:#fff; */
							color: #f00;
							font-size: 16px;
					}
				</style>
</div>

  

  

 

 

  

 

 

有趣的background

标签:形式   size   分享图片   tom   absolute   ati   bottom   边框   虚线   

原文地址:https://www.cnblogs.com/yy95/p/9531720.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!