css图片中间添加空白区域怎么弄

html-css09

css图片中间添加空白区域怎么弄,第1张

css图片中间添加空白区域按照以下步骤弄。

1、将图片转化为块级对象。

2、设置图片的垂直对齐方式。

3、设置父对象的文字大小为0px。

4、改变父对象的属性。

5、设置图片的浮动属性。

6、取消图片标签和其父对象的最后一个结束标签之间的空格。

可以使用以下几种方式：

1、相对定位方式，设置图片的position属性为relative，然后设置left top属性为负数，做到显示中间区域，外层标签要设置overflow属性为hidden不然会撑大。

2、把图片当做背景使用，然后设置背景居中或者手工填写位置。

3、使用图片margin属性，外层标签要设置overflow属性为hidden不然会撑大。

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

    <title>图片</title>

<style>

.div1{

    width:300px

    height:400px

    border:1px solid #4EC83B

    overflow: hidden

}

.div1 img {

    position: relative

    left: -100px

    top: -150px

}

</style>

</head>

<body>

<div style="float:leftmargin:10px">

    第一种

    <div class="div1">

        <img src="img1.jpg" width="500" height="700" alt="" />

    </div>

</div>

<div style="float:leftmargin:10px">

    第二种

    <div style="width:300pxheight:400pxbackground-image:url(img1.jpg)background-repeat: no-repeatbackground-position:center centerborder:1px solid #4EC83B">

    </div>

</div>

<div style="float:leftmargin:10px">

    第三种

    <div style="width:300pxheight:400pxborder:1px solid #4EC83B overflow: hidden">

        <img src="img1.jpg" width="500" height="700" style="margin:-150px -100px" />

    </div>

</div>

</body>

</html>

效果如下：