为什么在DW和VS中设置的图片方式不同，有什么不同，那么要怎么设置呢？

最新推荐文章于 2021-08-03 22:36:32 发布

玖.儿

最新推荐文章于 2021-08-03 22:36:32 发布

阅读量1k

点赞数 3

本文链接：https://blog.csdn.net/weixin_44484756/article/details/86543357

版权

为什么在DW和VS中设置的图片方式不同？
因为不同的开发工具都会有自身独特的样式，就像人一样，双胞胎也会有不同的地方。正如这样，所有DW和VS在图片设置方面也不同。（DW是dreamweaver的简称，VS是Visual Studio的简称）

有什么不同？
设置图片的background属性不同，在VS中可以用background属性来相对于父级盒子移动图片的位置。

那么要怎么设置呢？
一 . 在DW的样式中放图片：先给盒子设置宽高和背景颜色，可以更好地观察效果，再放置图片

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
	   //图片不重复：no-repeat
	.box{
		width:500px;
		height:350px;
		background: #eaeaea url(images/_20181219072335.jpg) no-repeat;
	}	
</style>
<body>
	<div class="box"></div>
</body>
</html>

得出的结果是这样的：
在这里插入图片描述
注：上面有一个重要的知识点，no-repeat是不重复的意思，不让图片重复出现占满整张图片，如果不设置是这种效果，它会占满整个空间为止

二 . 在VS的样式中放图片：放置图片的代码和DW放置图片的代码不一样，来看一下

.box {
    width: 500px;
    height: 350px;
    background: #eaeaea no-repeat;
    background-image: url('img/_20181219072335.jpg');
}

在background属性里面能设置背景颜色和no-repeat，但 不能放图片。
而放图片是在background-image属性设置，no-repeat 不能设置，否则报错。
在background属性中还有个更好玩的样式，就是通过数字，可以移动图片的位置。

// 50%是相对盒子移动左右的距离，20%是相对盒子移动上下的距离

background: #eaeaea no-repeat 50% 20%;

在这里插入图片描述
在DW和VS中都可以用background-size属性来设置图片的大小：如果你想一张图片占满整个空间，那可以用background-size属性来设置，不设置之前是图一，下图是设置background-size为100%之后的效果

.box{
		width:500px;
		height:350px;
		background:#eaeaea url(images/_20181219072335.jpg);
		background-size:100%;
	}

在这里插入图片描述
好了今天就分享到这里，你有收获吗？希望能帮助到你，还有什么疑问可以留言哦！

玖.儿

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
为什么在DW和VS中设置的图片方式不同，有什么不同，那么要怎么设置呢？

为什么在DW和VS中设置的图片方式不同？因为不同的开发工具都会有自身独特的样式，就像人一样，双胞胎也会有不同的地方。正如这样，所有DW和VS在图片设置方面也不同。（DW是dreamweaver的简称，VS是Visual Studio的简称）有什么不同？设置图片的属性不同，在VS中可以相对于父级盒子来移动图片的位置。那么要怎么设置呢？一 . 在DW的样式中放图片：先给父级元素设置宽高和背景...
复制链接

扫一扫