>> 欢迎您客人: 登录 | 注册 | 在线 | 搜索 | 风格 | 帮助 | 统计 | 文章

返回首页

>>分享Web前端开发技术，并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持

书籍支持

卫琴直播

品书摘要

在线测试

资源下载

联系我们

Java技术网站 → 『 Java开发技术』 → 『 Web前端开发技术专题』 → CSS 布局图片

您是本文章第 26016 个阅读者

* 贴子主题: CSS 布局图片

点赞(0) 收藏

作者:sunshine 发表时间：2019-08-12 14:48:36

消息

查看

搜索

好友

邮件

复制

引用

CSS 图片

本文将为大家介绍如何使用 CSS 来布局图片。

圆角图片

范例

     圆角图片:

img {
     border-radius:  8px;
}

范例

     椭圆形图片:

img {
     border-radius:  50%;
}

缩略图

我们使用border 属性来创建缩略图。

范例

img {
     border:  1px solid #ddd;
     border-radius:  4px;
     padding:  5px;
}

< img src="paris.jpg" alt="Paris">

范例

a {
     display:  inline-block;
     border:  1px solid #ddd;
     border-radius:  4px;
     padding:  5px;
    transition:  0.3s;
}

a:hover {
     box-shadow:  0 0 2px 1px rgba   (0, 140, 186, 0.5);
}

< a href="paris.jpg">
   < img src="paris.jpg" alt="Paris">
< /a>

响应式图片

     响应式图片会自动适配各种尺寸的屏幕。

    范例中，你可以通过重置浏览器大小查看效果:

         点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小

如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：

范例

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

提示: Web 响应式设计更多内容可以参考

图片文本

如何定位图片文本:

范例

卡片式图片

范例

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;
}

图片滤镜

CSS filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。

注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。

范例

修改所有图片的颜色为黑白 (100% 灰度):

img {
     -webkit-filter:  grayscale(100%);  /* Chrome, Safari,

Opera */

                   filter:  grayscale(100%);
}

          <iframe src="/try/demo_source/trycss_ex_images_filters.htm" style="width:100%;border:none;height:600px;"></iframe>

响应式图片相册

范例

.responsive {
     padding:  0 6px;
     float:  left;
     width:  24.99999%;
}

@media only screen and (max-width: 700px){
     .responsive {
         width:  49.99999%;
         margin:  6px 0;
    }
}

@media only screen and (max-width: 500px){

    .responsive {        width:  100%;     }
}

图片 Modal(模态)

     本范例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。

     首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。

     然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：

范例

// 获取模态窗口
var modal = document.getElementById( 'myModal');

// 获取图片模态框，alt 属性作为图片弹出中文本描述
var img = document.getElementById( 'myImg');
var modalImg = document.getElementById( "img01");

  var captionText = document.getElementById( "caption");
  img.onclick =  function(){
    modal.style.display =  "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
}

   // Get the <span> element that closes the modal
var span = document.getElementsByClassName( "close")[ 0];

// When the user clicks
on <span> (x), close the modal
span.onclick =  function() {
    modal.style.display =  "none";
}

程序猿的技术大观园：www.javathinker.net

[这个贴子最后由 flybird 在 2020-02-27 10:56:13 重新编辑]

Java精品书籍推荐