CSS美化图像
网页中,可能存在大量的图片,但是大家又没有对那些图片进行修饰的话,网页会显示的非常凌乱,这个时候就需要我们大家通过CSS来统一的管理我们的图片,比如:给图片加边框,给图片设置宽高,以及一些其他效果。
图片边框
如果需要在网页中,针对图片进行边框设置,只需要在图片的样式中,添加border属性即可。当然也可以用border一些衍生属性,比如: border-widh , border-style, border-color,还可以继续使用前面这些属性的衍生属性,例如: border_left_widh......
图片缩放
在网页中,如果大量的图片都是按照自身的宽度和高度来进行显示的话,整个页面会非常的丑,所以通常情况下,我们都需要对图片进行统一的高宽设置,但是如果对图片的设置不恰当,也会导致图片变形或失真.......
设置宽度,我们需要使用width属性;设置高度,我们需要使用height属性。
如:style="width: 150px;height: 30px"
除了width和height属性可以设置图片的高宽之外,我们还可以使用max-width、max-height来设置图片的最大高宽,这两个属性任选其一,且只能选择其中一个,它是按照原图片同比例缩放;如果该图片大小没有超过最大值,那么就按照原图大小显示,原图大小超过了这个最大值,那么按照最大值显示。
图片对齐
1、水平对齐
图片水平对齐,使用的属性是text-align ,但是这个属性只针对文字有效,对图片、多媒体文件,它们都没效果的,所以我们需要将该属性定义在父级元素上面来实现整水平移动。
例如:
<p style="text-align: center"><img src="../Image/phone.png" height="27" width="19"/></p>
2、垂直对齐
垂直对齐详见段落属性vertical-align
文字环绕(float属性)
网页中,文字环绕图片的情况非常多,那么如何对针对文字和图片进行排版就非常的重要,因为一个好的图文结合,可以起到一种相得益彰的效果。如果要做到文字环绕着图片出现,那么就需要使用float属性。
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
属性值:
值 |
描述 |
left |
元素向左浮动。 |
right |
元素向右浮动。 |
none |
默认值。元素不浮动,并会显示在其在文本中出现的位置。 |
inherit |
规定应该从父元素继承 float 属性的值。 |
图片边框背景border-image
如果我们需要给某一个图片,添加外边框,然后又想给外边距使用图片来作为背景时,可以使用border-image该属性.
border-image 属性是一个简写属性,用于设置以下属性:
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
如果省略值,会设置其默认值。
提示:请使用 border-image-* 属性来构造漂亮的可伸缩按钮!
语法:
{border_image:none | url(·····) width height 属性值}
属性值:
值 |
描述 |
border-image-source |
用在边框的图片的路径。 |
border-image-slice |
图片边框向内偏移。 |
border-image-width |
图片边框的宽度。 |
border-image-outset |
边框图像区域超出边框的量。 |
border-image-repeat |
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 |