2019-11-05

CSS Image 图像

前言

使用 CSS 很容易创建透明的图像。
CSS Opacity 属性是 W3C 的 CSS3 建议的一部分。
图像拼合就是单个图像的集合。
有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
使用图像拼合会降低服务器的请求数量，并节省带宽。

1、圆角图片

属性	描述	CSS	🔗
border-radius	所有四个边角 border---radius 属性的缩写	3	🔗
border-top-left-radius	定义了左上角的弧度	3	🔗
border-top-right-radius	定义了右上角的弧度	3	🔗
border-bottom-right-radius	定义了右下角的弧度	3	🔗
border-bottom-left-radius	定义了左下角的弧度	3	🔗

1.1 圆角图片

实例

<style>
    img {
        border-radius: 8px;
    }
</style>

1	<img src="https://demo.qianchia.com/media/image/demo/demo21.png" alt="Paris" width="400" height="300" />

效果

1.2 椭圆形图片

实例

<style>
    img {
        border-radius: 50%;
    }
</style>

1	<img src="https://demo.qianchia.com/media/image/demo/demo21.png" alt="Paris" width="400" height="300" />

效果

2、缩略图

使用 border 属性来创建缩略图。在图片外层添加一个链接。

属性	描述	CSS	备注	🔗
border	简写属性，用于把针对四个边的属性设置在一个声明	1		🔗

实例

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

1
2
3

<a target="_blank" href="https://demo.qianchia.com/media/image/demo/demo21.png">
    <img src="https://demo.qianchia.com/media/image/demo/demo21.png" alt="Paris" width="400" height="300" />
</a>

效果

3、图片文本

定位图片文本。

属性	描述	CSS	🔗
position	指定元素的定位类型	2	🔗
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移	2	🔗
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移	2	🔗
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移	2	🔗
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移	2	🔗

实例

<style>
    .container {
        position: relative;
        text-align: center;
    }
    img {
        width: 100%;
        height: auto;
        opacity: 0.3;
    }
    .lefttop     {position: absolute; top: 8px;    left: 16px;  font-size: 18px;}
    .leftbottom  {position: absolute; bottom: 8px; left: 16px;  font-size: 18px;}
    .righttop    {position: absolute; top: 8px;    right: 16px; font-size: 18px;}
    .rightbottom {position: absolute; bottom: 8px; right: 16px; font-size: 18px;}
    .center      {position: absolute; left: 0%; top: 50%; width: 100%; font-size: 18px;}
</style>

<div class="container">
    <img src="https://demo.qianchia.com/media/image/demo/demo22.png" alt="Norway" />
    <div class="lefttop">左上角</div>
    <div class="leftbottom">左下角</div>
    <div class="righttop">右上角</div>
    <div class="rightbottom">右下角</div>
    <div class="center">居中</div>
</div>

效果

左上角

左下角

右上角

右下角

居中

4、卡片式图片

属性	描述	CSS	备注	🔗
box-shadow	附加一个或多个下拉框的阴影	3		🔗

响应式卡片。

实例

<style>
    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);
        margin-bottom: 25px;
    }
    div.container {
        text-align: center;
        padding: 10px 20px;
    }
    img {
        width: 100%;
    }
</style>

<div class="polaroid">
    <img src="https://demo.qianchia.com/media/image/demo/demo21.png" alt="Norway" />
    <div class="container">
        <p>The Troll's tongue in Hardanger, Norway</p>
    </div>
</div>

<div class="polaroid">
    <img src="https://demo.qianchia.com/media/image/demo/demo12.png" alt="Norway" />
    <div class="container">
        <p>Northern Lights in Norway</p>
    </div>
</div>

效果

The Troll’s tongue in Hardanger, Norway

Northern Lights in Norway

5、响应式图片

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

属性	描述	CSS	备注	🔗
max-width	设置元素的最大宽度	2		🔗

实例中，可以通过重置浏览器大小查看效果，如果需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码。

实例

<style>
    img {
        max-width: 100%;
        height: auto;
    }
</style>

1	<img src="https://demo.qianchia.com/media/image/demo/demo22.png" alt="Paris" />

效果
重置浏览器大小查看效果。

5.1 响应式图片相册

使用 CSS3 的媒体查询来创建响应式图片相册。

实例

<style>
    div.img {
        border: 1px solid #ccc;
    }
    div.img:hover {
        border: 1px solid #777;
    }
    div.img img {
        width: 100%;
        height: auto;
    }
    div.desc {
        padding: 15px;
        text-align: center;
    }
    
    * {
        box-sizing: border-box;
    }
    .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%;
        }
    }

    .clearfix:after {
        content: "";
        display: table;
        clear: both;
    }
</style>

<div class="responsive">
    <div class="img">
        <a target="_blank" href="https://demo.qianchia.com/media/image/demo/demo10.png">
            <img src="https://demo.qianchia.com/media/image/demo/demo10.png" alt="Trolltunga Norway" width="300" height="200" />
        </a>
        <div class="desc">这里添加图片文本描述</div>
    </div>
</div>
<div class="responsive">
    <div class="img">
        <a target="_blank" href="https://demo.qianchia.com/media/image/demo/demo11.png">
            <img src="https://demo.qianchia.com/media/image/demo/demo11.png" alt="Forest" width="600" height="400" />
        </a>
        <div class="desc">这里添加图片文本描述</div>
    </div>
</div>
<div class="responsive">
    <div class="img">
        <a target="_blank" href="https://demo.qianchia.com/media/image/demo/demo12.png">
            <img src="https://demo.qianchia.com/media/image/demo/demo12.png" alt="Northern Lights" width="600" height="400" />
        </a>
        <div class="desc">这里添加图片文本描述</div>
    </div>
</div>
<div class="responsive">
    <div class="img">
        <a target="_blank" href="https://demo.qianchia.com/media/image/demo/demo13.png">
            <img src="https://demo.qianchia.com/media/image/demo/demo13.png" alt="Mountains" width="600" height="400" />
        </a>
        <div class="desc">这里添加图片文本描述</div>
    </div>
</div>

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

效果

这里添加图片文本描述

这里添加图片文本描述

这里添加图片文本描述

这里添加图片文本描述
重置浏览器大小查看效果。

6、图片滤镜

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

属性	描述	CSS	备注	🔗
filter	定义了元素 (通常是 `<img>`) 的可视效果 (例如：模糊与饱和度)	3		🔗

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

实例

<style>
    img {
        width: 33%;
        height: auto;
        float: left;
        max-width: 235px;
    }
    .blur       {filter: blur(4px);          -webkit-filter: blur(4px);}
    .brightness {filter: brightness(250%);   -webkit-filter: brightness(250%);}
    
    .contrast   {filter: contrast(180%);     -webkit-filter: contrast(180%);}
    .grayscale  {filter: grayscale(100%);    -webkit-filter: grayscale(100%);}
    .huerotate  {filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg);}
    
    .invert     {filter: invert(100%);       -webkit-filter: invert(100%);}
    .opacity    {filter: opacity(50%);       -webkit-filter: opacity(50%);}
    .saturate   {filter: saturate(7);        -webkit-filter: saturate(7);}
    
    .sepia      {filter: sepia(100%);        -webkit-filter: sepia(100%);}
    .shadow     {filter: drop-shadow(8px 8px 10px green); -webkit-filter: drop-shadow(8px 8px 10px green);}
</style>

<img src="https://demo.qianchia.com/media/image/demo/demo23.png" alt="Pineapple" width="300" height="300" />
<img class="blur" src="https://demo.qianchia.com/media/image/demo/demo23.png" alt="Pineapple" width="300" height="300" />
<img class="brightness" src="https://demo.qianchia.com/media/image/demo/demo23.png" alt="Pineapple" width="300" height="300" />
<img class="contrast" src="https://demo.qianchia.com/media/image/demo/demo23.png" alt="Pineapple" width="300" height="300" />
<img class="grayscale" src="https://demo.qianchia.com/media/image/demo/demo23.png" alt="Pineapple" width="300" height="300" />
<img class="huerotate" src="https://demo.qianchia.com/media/image/demo/demo23.png" alt="Pineapple" width="300" height="300" />
<img class="invert" src="https://demo.qianchia.com/media/image/demo/demo23.png" alt="Pineapple" width="300" height="300" />
<img class="opacity" src="https://demo.qianchia.com/media/image/demo/demo23.png" alt="Pineapple" width="300" height="300" />
<img class="saturate" src="https://demo.qianchia.com/media/image/demo/demo23.png" alt="Pineapple" width="300" height="300" />
<img class="sepia" src="https://demo.qianchia.com/media/image/demo/demo23.png" alt="Pineapple" width="300" height="300" />
<img class="shadow" src="https://demo.qianchia.com/media/image/demo/demo23.png" alt="Pineapple" width="300" height="300" />

效果

7、透明/不透明

使用 CSS 很容易创建透明的图像。
注意：CSS Opacity 属性是 W3C 的 CSS3 建议的一部分。

7.1 创建

CSS3 中属性的透明度是 opacity。
IE9，Firefox，Chrome，Opera，和 Safari 浏览器使用透明度属性可以将图像变的不透明。Opacity 属性值从 0.0 - 1.0。值越小，使得元素更加透明。
IE8 和早期版本使用滤镜：filter: alpha(opacity=x)。x 可以采取的值是从 0 - 100。较低的值，使得元素更加透明。
正常的图像

实例

<style>
    img {
        opacity: 0.4;
        filter: alpha(opacity=40); /* IE8 及其更早版本 */
    }
</style>

1	<img src="https://demo.qianchia.com/media/image/demo/demo6.png" alt="Trolltunga Norway" width="200" height="150" />

效果

7.2 悬停

实例

<style>
    img {
        opacity: 0.4;
        filter: alpha(opacity=40); /* IE8 及其更早版本 */
    }

    img:hover {
        opacity: 1.0;
        filter: alpha(opacity=100); /* IE8 及其更早版本 */
    }
</style>

1	<img src="https://demo.qianchia.com/media/image/demo/demo6.png" alt="Trolltunga Norway" width="200" height="150" />

效果
解析
- 第一个 CSS 块是和上例中的代码类似。此外，还增加了当用户将鼠标悬停在其中一个图像上时发生什么。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图片是清晰的。
- 此 CSS 是：opacity=1.
- IE8 和更早版本使用：filter: alpha(opacity=100)。
- 当鼠标指针远离图像时，图像将重新具有透明度。

7.3 文字

透明的盒子中的文字

实例

<style>
    div.background {
        width: 500px;
        height: 250px;
        background: url(https://demo.qianchia.com/media/image/demo/demo6.png) repeat;
        border: 2px solid black;
    }

    div.transbox {
        width: 400px;
        height: 180px;
        margin: 30px 50px;
        background-color: #ffffff;
        border: 1px solid black;
        
        opacity: 0.6;
        filter: alpha(opacity=60); /* IE8 及更早版本 */
    }

    div.transbox p {
        margin: 30px 40px;
        font-weight: bold;
        color: #000000;
    }
</style>

<div class="background">
    <div class="transbox">
        <p>这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。
        这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。
        </p>
    </div>
</div>

效果
解析
- 首先，创建一个固定的高度和宽度的 div 元素，带有一个背景图片和边框。
- 然后在第一个 div 内部创建一个较小的 div 元素。这个 div 也有一个固定的宽度，背景颜色，边框 - 而且它是透明的。
- 透明的 div 里面，在 p 元素内部添加一些文本。

8、图像拼合

图像拼合就是单个图像的集合。
有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
使用图像拼合会降低服务器的请求数量，并节省带宽。

8.1 实例

与其使用三个独立的图像，不如使用这种单个图像（”demo14.png”）。
有了 CSS，我们可以只显示我们需要的图像的一部分。
在下面的例子 CSS 指定显示 “demo14.png” 的图像的一部分。

实例

<style>
    img.home {
        width: 46px;
        height: 44px;
        background: url(https://demo.qianchia.com/media/image/demo/demo14.png) 0 0;
    }

    img.next {
        width: 43px;
        height: 44px;
        background: url(https://demo.qianchia.com/media/image/demo/demo14.png) -91px 0;
    }
</style>

1 2	<img class="home" src="https://demo.qianchia.com/media/image/demo/demo15.png" /> <br /><br /> <img class="next" src="https://demo.qianchia.com/media/image/demo/demo15.png" />

效果
解析
- <img class="home" src=".../demo15.png" /> - 因为不能为空，src 属性只定义了一个小的透明图像。显示的图像将是我们在 CSS 中指定的背景图像。
- 宽度：46px; 高度：44px; - 定义我们使用的那部分图像。
- background: url(.../demo14.png) 0 0; - 定义背景图像和它的位置（左 0px，顶部 0px）。

8.2 链接

上例使用图像拼合最简单的方法，现在我们使用链接。

实例

<style>
    .navlist {
        position: relative;
    }

    .navlist li {
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
        top: 0;
    }

    .navlist li, .navlist a {
        height: 44px;
        display: block;
    }

    .home {
        left: 0px;
        width: 46px;
    }
    .home {
        background: url(https://demo.qianchia.com/media/image/demo/demo14.png) 0 0;
    }

    .prev {
        left: 63px;
        width: 43px;
    }
    .prev {
        background: url(https://demo.qianchia.com/media/image/demo/demo14.png) -47px 0;
    }

    .next {
        left: 129px;
        width: 43px;
    }
    .next {
        background: url(https://demo.qianchia.com/media/image/demo/demo14.png) -91px 0;
    }
</style>

<ul class="navlist">
    <li class="home"><a href="https://www.qianchia.com" target="_blank"></a></li>
    <li class="prev"><a href="https://blog.qianchia.com" target="_blank"></a></li>
    <li class="next"><a href="https://mp.qianchia.com" target="_blank"></a></li>
</ul>

效果
解析
- .navlist {position: relative;} - 位置设置相对定位，让里面的绝对定位。
- .navlist li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} - margin 和 padding 设置为 0，列表样式被删除，所有列表项是绝对定位。
- .navlist li, .navlist a {height: 44px; display: block;} - 所有图像的高度是 44px。
- 现在开始每个具体部分的定位和样式：
  - .home {left: 0px; width: 46px;} - 定位到最左边的方式，以及图像的宽度是 46px。
  - .home {background: url(.../demo14.png) 0 0;} - 定义背景图像和它的位置（左 0px，顶部 0px）。
  - .prev {left: 63px; width: 43px;} - 右侧定位 63px（.home 宽 46px + 项目之间的一些多余的空间），宽度为 43px。
  - .prev {background: url(.../demo14.png) -47px 0;} - 定义背景图像右侧 47px（.home 宽 46px + 分隔线的 1px）。
  - .next {left: 129px; width: 43px;} - 右边定位 129px (.prev 63px + .prev 宽是 43px + 剩余的空间), 宽度是 43px。
  - .next {background: url(.../demo14.png) no-repeat -91px 0;} - 定义背景图像右边 91px（.home 46px + 1px 的分割线 + .prev 宽 43px + 1px 的分隔线）。

8.3 悬停

现在，我们希望我们的导航列表中添加一个悬停效果。
:hover 选择器用于鼠标悬停在元素上的显示的效果，:hover 选择器可以运用于所有元素。
我们的新图像 (“demo16.png”) 包含三个导航图像和三幅图像。
因为这是一个单一的图像，而不是 6 个单独的图像文件，当用户停留在图像上不会有延迟加载。
我们添加悬停效果只添加三行代码。

实例

<style>
    .navlist {
        position: relative;
    }

    .navlist li {
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
        top: 0;
    }

    .navlist li, .navlist a {
        height: 44px;
        display: block;
    }

    .home {
        left: 0px;
        width: 46px;
    }
    .home {
        background: url(https://demo.qianchia.com/media/image/demo/demo16.png) 0 0;
    }
    .home a:hover {
        background: url(https://demo.qianchia.com/media/image/demo/demo16.png) 0 -45px;
    }

    .prev {
        left: 63px;
        width: 43px;
    }
    .prev {
        background: url(https://demo.qianchia.com/media/image/demo/demo16.png) -47px 0;
    }
    .prev a:hover {
        background: url(https://demo.qianchia.com/media/image/demo/demo16.png) -47px -45px;
    }

    .next {
        left: 129px;
        width: 43px;
    }
    .next {
        background: url(https://demo.qianchia.com/media/image/demo/demo16.png) -91px 0;
    }
    .next a:hover {
        background: url(https://demo.qianchia.com/media/image/demo/demo16.png) -91px -45px;
    }
</style>

<ul class="navlist">
    <li class="home"><a href="https://www.qianchia.com" target="_blank"></a></li>
    <li class="prev"><a href="https://blog.qianchia.com" target="_blank"></a></li>
    <li class="next"><a href="https://mp.qianchia.com" target="_blank"></a></li>
</ul>

效果
解析：
- 由于该列表项包含一个链接，我们可以使用 :hover 伪类。
- .home a:hover{background: transparent url(.../demo16.png) 0 -45px;} - 对于所有三个悬停图像，我们指定相同的背景位置，只是每个再向下 45px。

如何结合 CSS 和 JavaScript 来一起渲染图片。
- 首先，使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。
- 然后，使用 JavaScript 来显示模态窗口，当点击图片时，图片会在弹出的窗口中显示。

实例

<style>
    #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>

<img id="myImg" src="https://demo.qianchia.com/media/image/demo/demo12.png" 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>

效果

×

10、CSS 实例

图片廊

创建透明图像 - 鼠标悬停效果

创建一个背景图像与文本的透明框

图像拼合

图像拼合-导航列表

悬停效果与图像拼合

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-05 20:14

Qian Chia's Blog

赞助

搜索

分类

标签

CSS Image 图像

前言

1、圆角图片

1.1 圆角图片

1.2 椭圆形图片

2、缩略图

3、图片文本

4、卡片式图片

5、响应式图片

5.1 响应式图片相册

6、图片滤镜

7、透明/不透明

7.1 创建

7.2 悬停

7.3 文字

8、图像拼合

8.1 实例

8.2 链接

8.3 悬停

10、CSS 实例

评论

前言

1、圆角图片

1.1 圆角图片

1.2 椭圆形图片

2、缩略图

3、图片文本

4、卡片式图片

5、响应式图片

5.1 响应式图片相册

6、图片滤镜

7、透明/不透明

7.1 创建

7.2 悬停

7.3 文字

8、图像拼合

8.1 实例

8.2 链接

8.3 悬停

9、图片 Modal（模态）

10、CSS 实例

评论