CSS3 中的图片缩放特效

用Firebug动态的查看元素的变化(HTML与CSS)

.blogs figure img { width: 100%; margin: auto; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.blogs figure:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); }

CSS3标签中的transform：scale(图片缩放比例), 1代表原图显示, 1.1缩放1.1倍…

transform: 变形

scale: 缩放

tranistion: 过渡

站文章怎么添加图片？在进行网站优化时，站内文章的质量很重要，其中除了需要撰写高质量的内容，注意关键词的密度布局这些，添加图片也具有一定的优化作用，有利于提升用户的体验。那么如何在文章中添加图片呢？

通常，在网站文章中添加图片有手动、半手动和自动这三种方法。

手动添加图片就是手动点击添加本地的图片，这种方式的效率较低，而且需要自己找寻合适的图片；半手动添加图片就是先处理好图片并命名，打包上传到服务器，然后利用工具批量插入图片在服务器中的地址，找到图片存储文件夹，记录其路径，这样文章发布时就避免手动查找图片，比纯手动添加效率高；自动添加图片就是利用插件来实现。有一些CMS程序中会有很多插件是可以使用的，如果没有图片添加的相关插件，可以找人开发一个。这个插件主要实现的功能是，按照指定的图片作为底部图层，而后在图片上自动生成文字，并且是以文章标题为准，这样这篇文章就有了专属图片。当然，进一步优化就是实现不同文章位置插入图片。这样做的好处是，如果底层图片没有版权，而且文字可以商用，也就避免了侵权的麻烦。

了解完如何在文章中添加图片，对于添加的图片还有一些问题是需要注意的。

所添加的图片大小

在处理图片时，需要先确定图片的正确大小，等上传后发现尺寸不对再去修改是很浪费时间的，而图片太大会拖累网站的加载速度，这一点是需要注意的。另外，还需要考虑网站支持格式的问题，通常是jpg、png比较好。

给图片添加Alt标签

搜索引擎是无法识别图片的，必须用html标签中的alt标签属性来识别，因此给图片添加Alt标签是必不可少的操作，这有利于蜘蛛抓取。

所添加图片的数量

图文结合的文章能增加用户的阅读体验，但是太多的图片会有反效果，因此一篇文章中的一两张图片就足够了。另外要注意，图片太多也会拖累网站的加载速度，所以要控制图片的数量，不仅是和文字要有一个平衡点，还有和网站结构也要有一个平衡点。

所添加图片相关性

在文章中添加图片当然不是随意添加的，应该为该页面配备符合主题的相关图片，要注意网站图片和网站内容的相关联性。

关于网站文章怎么添加图片及图片添加要注意的问题，我们就讨论到这里，以上内容仅供参考。对于网站图片优化的细节大家一定要多多注意，最好希望这篇能对大家进行网站优化有帮助。

言

通常，我们为div盒子或者图片设置阴影使用 box-shadow 属性，代码如下：

box-shadow: 10px 10px 10px gray;

问题抛出

使用 box-shadow 属性给div盒子设置阴影倒还好，如果用在透明的图片上，阴影会变成方形的，让其看起来像添加了一个边框一样。

解决方法

我们可以通过css的另一种参数，为透明png实现基于透明图片的阴影效果，效果如下图，左侧是 box-shadow ，右侧 drop-shadow 。

drop-shadow()说明：

drop-shadow() 是CSS中用于为图像或文本添加阴影效果的一个函数，‌它属于 filter 属性的一部分。‌这个函数允许你为元素创建阴影，‌而不需要考虑元素的形状或边界框。‌与 box-shadow 不同，‌drop-shadow 可以应用于非矩形形状，‌如透明的PNG或SVG图像，‌它使用元素的Alpha蒙版来决定阴影的形状。‌这意味着，‌即使元素没有背景，drop-shadow 也能为图像的非透明部分创建阴影。‌

drop-shadow()语法如下：

filter: drop-shadow( offset-x offset-y blur-radius spread-radius color )

drop-shadow()参数说明如下：

offset-x：该参数设置图像的水平偏移量。正值创建右侧偏移，负值创建左侧偏移。
offset-y：此参数设置图像的垂直偏移量。正值创建到底部的偏移量，负值创建到顶部的偏移量。
blur-radius：设置模糊半径的值。它是一个可选参数。
spread-radius：设置传播半径的值。它是一个可选参数。
color：设置投影的颜色。它的可选参数。

演示代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .img_box .left_img{
      box-shadow: 10px 10px 10px gray;
    }
    .img_box .right_img{
      filter: drop-shadow(2px 4px 8px rgb(225, 170, 170));
    }
  </style>
</head>
<body>

  <div class="img_box">
    <img class="left_img" src="./lihua.png" />
    <img class="right_img" src="./lihua.png" />
  </div>
  
</body>
</html>

总结

尽管有很好的支持，但 drop-shadow 滤镜仍然没有得到充分的利用。我希望这篇文章强调了一些使用 box-shadow的情况，也许你可以在你的下一个项目中使用它！

在线咨询

上一篇：请避免犯这9个常见的 CSS “坏习惯”
下一篇：初识CSS-字体图标

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商