肉渣教程

CSS 图片样式

上一节 下一节

利用CSS可以把图片定义成各种样式。

使用图片滤镜

在CSS中可通过filter属性来实现图片滤镜的功能,该属性的浏览器兼容性如下所示。

属性
filter 53.0
18.0 -webkit-
13.0 35.0 9.1
6.0 -webkit-
40.0
15.0 -webkit-


案例

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

运行一下

翻转图片

翻转一张图片,水平翻转或者垂直翻转。这很简单,只是一种小技巧,如下所示。

img:hover {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

运行一下

圆角图片

利用CSS的border-radius就可以创建圆角的图片了。


案例1:圆角半径为8px

img {
    border-radius: 8px;
}

运行一下


案例2:圆角半径为50%

img {
    border-radius: 50%;
}

运行一下

设置装X的缩略图

缩略图其实没啥花样,下例中通过设置边界和内边距从而实现相对装X的缩略图。不难,看看就好啦~

<style>
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 150px;
}
</style>

<img src="https://logo.zhuanfou.com/draw_by_jerkz.jpg">

运行一下

给上面的那个装X的缩略图上加超链接

<style>
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 150px;
}

img:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>

<a href="https://zhuanfou.com/">
    <img src="https://logo.zhuanfou.com/draw_by_jerkz.jpg">
</a>

运行一下

图片自适应

一般来说图片自适应的CSS设置,主要是宽度采用百分百,高度取值auto,其实一般来说高度默认就是auto,所以有时不用特意声明定义高度为auto。

img {
    max-width: 100%;
    height: auto;
}

运行一下


CSS 图片样式

上一节 下一节