CSS 图像样式
CSS设置无法显示,请访问链接:
圆角图像
可以为图像设置边框,然后改变边框的圆角值,进而改变图像的直观视觉。
img.a1{
border-radius: 12px;
}
img.a2{
border-radius: 50%;
}
a1|a2
以上是创建的圆角图像和原型图象
缩略图图像
这个是缩略图
这个是带链接的缩略图,可以结合:hover伪类元素,来对图像或者链接进行加工。
缩略图的设置只需要更改图像宽就行了。
响应式图像
响应式图像会自动调整以适应屏幕尺寸:
可以设置
img {
width: auto;
}
如果需要自动调整图像,但是又不希望图像放大到比原来大或者小于原来的多少,可以设置:
img{
width: auto;
max-width: 100%;
min-width: 50%;
}
居中图像
如果要让图像水平居中,将图像的外边距设置为auto
并将图像设置为块级元素即可。
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
卡片式图片
使用box-shadow
属性来为图片设置阴影
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
透明图像
设置opacity即可
图像文本
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.center {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h1>图像文本</h1>
<p>居中图像中的文本:</p>
<div class="container">
<img src="" width="" height="">
<div class="center">Center</div>
</div>
</body>
</html>
也可以设置其他方向,更改top的值,或者添加left设置其值,然后配合border,width,margin-left,margin-top来更改图像中文字位置。像是之前的章节一样。
图像滤镜
CSS filter
属性把视觉效果(如模糊和饱和度)添加到元素。
以下属性可以把图像改为黑白:
img{
filter: grayscale(100%);
}
图像悬停叠加
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: 1.5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
white-space: nowrap;
color: white;
color:blue;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
如上,把待显示的div元素设置为高度为0,位于容器顶或低,然后再设置悬停时,令高度为100%,距离顶或者底设置为0,这样,就拉伸开了元素,通过更改top、bottom、letf和right的值,可以改变图像出来的位置。更过示例请看教程
翻转图像
可以使用下面两种方式:
img.a1:hover {
transform: scaleX(-1);
}
img.a2:hover{
transform: rotateY(180deg);
}
图像模态
此种设置需要使用JavaScript知识,可以先做了解。
CSS object-fit属性
此属性用来规定如何调整<img>或者<vedio>的大小来适应其容器。
object-fit
属性可接受如下值:
fill
- 默认值。调整替换后的内容大小,以填充元素的内容框。如有必要,将拉伸或挤压物体以适应该对象。contain
- 缩放替换后的内容以保持其纵横比,同时将其放入元素的内容框。cover
- 调整替换内容的大小,以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。none
- 不对替换的内容调整大小。scale-down
- 调整内容大小就像没有指定内容或包含内容一样(将导致较小的具体对象尺寸)
如下图原图
调整宽高后:
如此便会被拉伸或者压缩图像。
而当设置object-fit
属性为cover后:
会根据设置裁剪图像而不会拉伸压缩改变图像观感。
再比如,把两个图像并排显示,设置宽度为50%高度为100%,这样的话,随着浏览器页面大小的改变,图像会被拉伸或者压缩:
使用cover
后:
下面展示了其他值的作用:
原图:
设置宽高(fill
):
设置cover
:
设置contain
:
即扩大图片至容器刚好能容纳的最大原图等比放缩图。
设置scale-down
:
设置none
: