CSS background 属性及置换元素

最新推荐文章于 2022-08-10 09:44:55 发布

coodingcc

最新推荐文章于 2022-08-10 09:44:55 发布

阅读量496

点赞数 1

分类专栏：前端文章标签： css background

本文链接：https://blog.csdn.net/cristina_song/article/details/83108148

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

规定背景图像的尺寸：

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性：

background-color
background-image 规定要使用的背景图像
background-repeat 规定如何重复背景图像
background-origin 规定背景图片的定位区域
background-position 规定背景图像的位置

如果图片不居中可设置： background-position: center;

通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;

background-size 规定背景图片的尺寸，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */
background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
background-size:10%;/*
0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候将其作为图片宽度来等比缩放 */
background-size:cover;/* 将背景图片等比缩放填满整个容器 */
background-size:contain;/* 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。*/

background-clip 规定背景的绘制区域
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动

inherit 规定应该从父元素继承 background 属性的设置
如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url(‘smiley.gif’); 也是允许的。

Q、本地图能正常加载，测试过程中图片加载不出？
A、解决方案：
1.在class里面添加背景图片：background:url(“…/icon/icon.png”) no-repeat 5px 5px;
2.将图片import进来，如import image from…
3.用require加载
在这里插入图片描述
图片上下左右居中且自适应

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	.content{
		width: 300px;
		height: 300px;
		border: 1px solid red;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	img{
		max-width: 100%;
		max-height: 100%;
	}
</style>
<body>
<div class="content">
	<img src="./img.png">
</div>
</body>
</html>

img明明是行内元素为什么可以设置宽高？
原因：img确实是行内元素但它也是置换元素（包括img input select textarea button label 等）
他们区别一般inline元素是：这些元素拥有内在尺寸（内置宽高：可以设置width/height属性），他们的性质同设置了display:inline-block

直接background也可以实现上面的效果

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	.content{
		width: 300px;
		height: 300px;
		border: 1px solid red;
		box-sizing: border-box;
		background: url("./img.png") center center no-repeat;
        background-size: contain;
	}
	
</style>
<body>
<div class="content">
</div>
</body>

coodingcc

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS background 属性及置换元素

规定背景图像的尺寸：div{background:url(img_flwr.gif);background-size:80px 60px;background-repeat:no-repeat;}background 简写属性在一个声明中设置所有的背景属性。可以设置如下属性：background-colorbackground-image 规定要使用的背景图像backgro...
复制链接

扫一扫