CSS图像样式

最新推荐文章于 2024-04-30 23:17:05 发布

_南明_离火_

最新推荐文章于 2024-04-30 23:17:05 发布

阅读量2.2k

点赞数 1

分类专栏： CSS学习笔记文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_67340472/article/details/125514543

版权

CSS学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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：

_南明_离火_

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS图像样式

CSS图像样式和object-fit属性
复制链接

扫一扫

专栏目录