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

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

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

那么要怎么设置呢？

一 . 在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>

得出的结果是这样的：
为什么在DW和VS中设置的图片方式不同，有什么不同，那么要怎么设置呢？
注：上面有一个重要的知识点，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中设置的图片方式不同，有什么不同，那么要怎么设置呢？
好了今天就分享到这里，你有收获吗？希望能帮助到你，还有什么疑问可以留言哦！

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

相关推荐