css图片上面添加空白区域怎么弄

html-css013

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

css图片上面添加空白区域怎么弄如下：

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

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

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

4、转变父象对的属性。

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

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

第一步：我们需要准备一个图像

作为一个例子，我想在深色背景的背景上放置白色文字。

第二步：将图像和字母放在一个div元素中

将图像和字母放在一个div标签中。在示例中，将文字“万里长城”放在p标记中。当然您可以使用标题标签而不是p标签，也可以使用span标签。

1

2

3

4

<div class = "example" >

<img src="image/greatwall.jpg">

<p>万里长城</p>

</div>

第三步：指定position属性

为每个元素设置css的position属性。

对作为父元素的div指定为position:relative，以及对包含该字符串的p标签设置为absolute。img标签不动。

把p标签的位置设置为top:0left:0。

为了把图像放在横向上，请指定为img标签的宽度为width : 100%。

1

2

3

4

5

6

7

8

9

10

11

12

.example{/*父元素div*/

position: relative/*相対定位*/

}

.example p {

position: absolute/*绝対定位*/

color: white/*文字设为白色*/

top: 0

left: 0

}

.example img {

width: 100%

}

可以有多种方法实现的。比如可以给每个img设置不同的ID：

<img id=p1 src="1.jpg"/><img id=p2 src="2.jpg"/><img id=p3 src="3.jpg"/>

<style>

#p1 {border:1px solid #f00}

#p2 {border:1px solid #0f0}

#p3 {border:1px solid #00f}

</style>

或者是不同的class：

<img class=p1 src="1.jpg"/><img class=p2 src="2.jpg"/><img class=p3 src="3.jpg"/>

<style>

.p1 {border:1px solid #f00}

.p2 {border:1px solid #0f0}

.p3 {border:1px solid #00f}

</style>

还有一种更灵活的方式，但需要浏览器支持css3：

<img src="1.jpg"/><img src="2.jpg"/><img src="3.jpg"/>

<style>

img:nth-of-type(1) {border:1px solid #f00}

img:nth-of-type(2) {border:1px solid #0f0}

img:nth-of-type(3) {border:1px solid #00f}

</style>

这种方法还有多种灵活的处理方式，比如：

img:nth-of-type(odd) 会选择所有单数的图片（第1张、第3张、第5张……）

img:nth-of-type(even) 会选择所有双数的图片（第2张、第4张、第6张……）

img:nth-of-type(2n) 也是选择双数

img:nth-of-type(2n+1) 也是选择单数

img:nth-of-type(3n+1) 从第1张算起每3张取出1张图片（第1张、第4张、第7张……）

img:nth-of-type(5n+3) 从第3张算起每5张取出1张图片（第3张、第8张、第13张……）

除了这个，css还有几十种不同的选择器，你百度搜一下 css选择器 就知道了。