为什么在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%;
}
好了今天就分享到这里,你有收获吗?希望能帮助到你,还有什么疑问可以留言哦!