美文网首页
CSS3 图片

CSS3 图片

作者: maskerII | 来源:发表于2019-05-12 14:33 被阅读0次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 图片</title>
    <style>
        img.ex1{
            border-radius: 8px;
        }

        img.ex2{
            border-radius: 50%;
        }


        img.ex3{
            border: 1px solid #dddddd;
            border-radius: 4px;
            padding: 5px;
        }


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


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


        div.container2{
            position: relative;
            width: 50%;
        }

        div.topright2{
            position: absolute;
            top: 8px;
            right: 16px;
            font-size: 18px;
        }

        div.topleft2{
            position: absolute;
            top: 8px;
            left: 16px;
            font-size: 18px;
        }

        div.bottomleft2{
            position: absolute;
            bottom: 8px;
            left: 16px;
            font-size: 18px;
        }

        div.bottomright2{
            position: absolute;
            bottom: 8px;
            right: 16px;
            font-size: 18px;
        }

        div.center2{
            position: absolute;
            top: 50%;
            width: 100%;
            height: 30px;
            text-align: center;
            margin-top: -15px;
            font-size: 18px;


        }

        img.ex5{
            width: 100%;
            height: auto;
            opacity: 0.3;
        }



        div.polaroid3{
            width: 50%;
            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);
        }

        div.container3{
            text-align: center;
            padding: 10px 20px;
        }


        /*图片滤镜*/
        img.blur{-webkit-filter: blur(4px);filter: blur(4px);}
        img.brightness{-webkit-filter: brightness(0.4);filter:brightness(0.4);}
        img.contrast{-webkit-filter: contrast(180%);filter:contrast(180%);}
        img.grayscale{-webkit-filter: grayscale(100%);filter: grayscale(100%);}
        img.huerotate{-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
        img.invert{-webkit-filter: invert(100%);filter: invert(100%);}
        img.opacity{-webkit-filter: opacity(50%);filter: opacity(50%);}
        img.saturate{-webkit-filter: saturate(7);filter: saturate(7);}
        img.sepia{-webkit-filter: sepia(100%);filter: sepia(100%);}
        img.shadow{-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}



        /*相册*/
        div.img{
            border: 1px solid #cccccc;

        }

        div.img:hover{
            border: 1px solid #777777;
        }

        div.img img{
            width: 100%;
            height: auto;
        }

        div.desc{
            padding: 15px;
            text-align: center;
        }

        *{
            box-sizing: border-box;
        }

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


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

        }


        @media only screen and (max-width: 500px){
            div.responsive {
                width: 100%;
            }
        }

        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }



        #myImg {
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
        }

        #myImg:hover {opacity: 0.7;}

        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
        }

        /* Modal Content (image) */
        .modal-content {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
        }

        /* Caption of Modal Image */
        #caption {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
            text-align: center;
            color: #ccc;
            padding: 10px 0;
            height: 150px;
        }

        /* Add Animation */
        .modal-content, #caption {
            -webkit-animation-name: zoom;
            -webkit-animation-duration: 0.6s;
            animation-name: zoom;
            animation-duration: 0.6s;
        }

        @-webkit-keyframes zoom {
            from {-webkit-transform: scale(0)}
            to {-webkit-transform: scale(1)}
        }

        @keyframes zoom {
            from {transform: scale(0.1)}
            to {transform: scale(1)}
        }

        /* The Close Button */
        .close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }

        .close:hover,
        .close:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }

        /* 100% Image Width on Smaller Screens */
        @media only screen and (max-width: 700px){
            .modal-content {
                width: 100%;
            }
        }



    </style>
</head>
<body>

<h2>圆角图片</h2>
<p>使用 border-radius 属性来创建圆角图片:</p>
<img class="ex1" src="images/img_forest.jpg" alt="foest" width="300" height="200">
<br><br>
<img class="ex2" src="images/img_forest.jpg" alt="foest" width="300" height="200">
<br><br><br><br>

<h2>缩略图</h2>
<img class="ex3" src="images/img_forest.jpg" alt="foest" width="300" height="200">
<br><br>

<h2>缩略图作为连接</h2>
<p>我们使用 border 属性来创建缩略图。在图片外层添加一个链接。</p>
<p>点击图片查看效果：</p>
<a target="_blank" href="images/img_forest.jpg">
    <img src="images/img_forest.jpg" alt="forest" width="300" height="200">
</a>
<br><br>

<h2>响应式图片</h2>
<p>响应式图片会自动适配各种尺寸的屏幕。</p>
<p>通过重置浏览器大小查看效果:</p>

<img class="ex4" src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">

<h2>图片文本</h2>
<h3>右上角</h3>
<div class="container2">
    <img class="ex5" src="images/img_forest.jpg" alt="Forest">
    <div class="topright2">右上角</div>
</div>
<br><br>

<h3>左上角</h3>
<div class="container2">
    <img class="ex5" src="images/img_lights.jpg" alt="Light">
    <div class="topleft2">左上角</div>
</div>
<br><br>

<h3>右下角</h3>
<div class="container2">
    <img class="ex5" src="images/img_forest.jpg" alt="Forest">
    <div class="bottomright2">右下角</div>
</div>
<br><br>

<h3>左下角</h3>
<div class="container2">
    <img class="ex5" src="images/img_lights.jpg" alt="Light">
    <div class="bottomleft2">左下角</div>
</div>
<br><br>

<h3>居中</h3>
<div class="container2">
    <img class="ex5" src="images/img_lights.jpg" alt="Light">
    <div class="center2">居中</div>
</div>
<br><br>

<h2>响应式卡片</h2>
<div class="polaroid3">
    <img src="images/img_lights.jpg" alt="light" style="width: 100%">
    <div class="container3">
        <p>The Troll’s tongue inHardanger，Norway</p>
    </div>

</div>
<br><br>

<div class="polaroid3">
    <img src="images/img_forest.jpg" alt="forest" style="width: 100%">
    <div class="container3">
        <p>Northern Lights in Norway</p>
    </div>
</div>
<br><br>

<h2>图片滤镜</h2>
<p><strong>注意:</strong> Internet Explorer <span lang="no-bok">或 Safari 5.1 (及更早版本)</span> 不支持该属性。</p>

<img src="images/img_mountains.jpg" alt="Pineapple" width="300" height="300">
<img class="blur" src="images/img_mountains.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="images/img_mountains.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="images/img_mountains.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="images/img_mountains.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="images/img_mountains.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="images/img_mountains.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="images/img_mountains.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="images/img_mountains.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="images/img_mountains.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="images/img_mountains.jpg" alt="Pineapple" width="300" height="300">




<h2 style="text-align:center">响应式图片相册</h2>

<div class="responsive">
    <div class="img">
        <a target="_blank" href="img_fjords.jpg">
            <img src="images/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
        </a>
        <div class="desc">Add a description of the image here</div>
    </div>
</div>


<div class="responsive">
    <div class="img">
        <a target="_blank" href="img_forest.jpg">
            <img src="images/img_forest.jpg" alt="Forest" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
    </div>
</div>

<div class="responsive">
    <div class="img">
        <a target="_blank" href="img_lights.jpg">
            <img src="images/img_lights.jpg" alt="Northern Lights" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
    </div>
</div>

<div class="responsive">
    <div class="img">
        <a target="_blank" href="img_mountains.jpg">
            <img src="images/img_mountains.jpg" alt="Mountains" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
    </div>
</div>

<div class="clearfix"></div>

<div style="padding:6px;">

    <h4>重置浏览器大小查看效果</h4>
</div>




<h2>图片模态框</h2>
<p>本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。</p><p>
    首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。<p>
<p>然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：</p>
<img id="myImg" src="images/img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">
    <span class="close">×</span>
    <img class="modal-content" id="img01">
    <div id="caption"></div>
</div>

<script>
    // 获取模态窗口
    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;
    }

    // 获取 <span> 元素，设置关闭模态框按钮
    var span = document.getElementsByClassName("close")[0];

    // 点击 <span> 元素上的 (x), 关闭模态框
    span.onclick = function() {
        modal.style.display = "none";
    }
</script>

</body>
</html>
1、圆角图片

实例
圆角图片:

img {
    border-radius: 8px;
}

椭圆形图片:

img {
    border-radius: 50%;
}
2、缩略图

我们使用 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>
3、响应式图片

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

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

实例

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

卡片式图片
实例

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;
}
4、图片滤镜

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

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

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

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

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

5、响应式图片相册

实例

.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%;
    }
}
6、图片 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";
}

相关文章

  • 一篇文章带你了解CSS3图片边框

    CSS3图片边框 使用CSS3 border-image 属性，你可以在元素的周围设置图片边框。 一、浏览器支持 ...

  • 一篇文章带你了解CSS3图片边框

    CSS3图片边框 使用CSS3 border-image 属性，你可以在元素的周围设置图片边框。 一、浏览器支持 ...

  • CSS3:边框与圆角

    知识点： CSS3圆角CSS3盒阴影CSS3边界图片 一、CSS3圆角 border-radius属性 一个最多可...

  • Hack、过渡与变形（变换）

    条件Hack 图片的修复 属性 选择符 CSS3过渡动画 css3圆角 阴影 透明度 运动曲线 图片文字遮罩 变形...

  • CSS3总结

    CSS3 grayscale滤镜图片变黑白实例页面

  • css图片的一些方法

    css3过度动画 css3圆角、阴影、透明度 运动曲线 图片文字遮罩 变形 元素旋转

  • 一张图让你快速掌握CSS3倒影

    在CSS3之前，想要实现示例图片这样的一个倒影效果一般只能通过处理图片的方式，而CSS3问世之后，想要实现这样的效...

  • 2019-06-03

    css基础知识 完善 表单: 框架集 ie6png图片的修复 css3过渡动画： 例如 css3 阴影 ： 语法:...

  • --- > css3-背景

    背景(background) 在CSS3之前我们对背景图片的控制极为有限，只能决定其来源、位置、重复，CSS3开辟...

  • web前端面试提问总结：

    学过CSS3吗？CSS3的新增特性有哪些？ 主要是文本效果、边框、图片、字体、背景效果、阴影效果、色彩类： RGB...

网友评论

      本文标题：CSS3 图片

      本文链接：https://www.haomeiwen.com/subject/cpxtaqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|CSS3 图片|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！