您的位置：首页 > 其它

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

2019-01-18 17:11 567 查看

为什么在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%;
}

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航