Maison > Article > interface Web > 纯CSS3写的10个不同的酷炫图片遮罩层效果

纯CSS3写的10个不同的酷炫图片遮罩层效果

高洛峰original: 2017-03-16 13:13:212066parcourir

这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果，可以欣赏一下

实例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>纯CSS3写的10个不同的酷炫图片遮罩层效果</title>
        <link rel="stylesheet" type="text/css" href="css/demo.css" />

        <!--必要样式-->
        <link rel="stylesheet" type="text/css" href="css/style_common.css" />
        <link rel="stylesheet" type="text/css" href="css/style1.css" />


    </head>
    <body>

        <p class="main">
            <p class="view view-first">
                <img src="images/1.jpg" />
                <p class="mask">
                    <h2><a href=&#39;#&#39;>PHP中SESSION和COOKIE基本用法</a></h2>
                    <p>在项目中我们会经常用到Session和Cookie，比如用户登录验证、记录用户浏览历史，存储购物车数据，限制用户会话有效时间等。今天我们介绍下PHP是如何操作Session和Cookie的。</p>
                    <a href="#" class="info">Read More</a>
                </p>
            </p>
            <p class="view view-first">
                <img src="images/2.jpg" />
                <p class="mask">
                    <h2><a href=&#39;#&#39;>HTML5制作简单的钟表</a></h2>
                    <p>今天我们用canvas标签并配合javascript来制作一个漂亮的时钟</p>
                    <a href="#" class="info">Read More</a>
                </p>
            </p>
            <p class="view view-first">
                <img src="images/3.jpg" />
                <p class="mask">
                    <h2><a href=&#39;#&#39;>jQuery拉伸搜索框</a></h2>
                    <p>今天分享一个CSS3+jQuery制作一个可伸缩功能的搜索框。</p>
                    <a href="#" class="info">Read More</a>
                </p>
            </p>
            <p class="view view-first">
                <img src="images/4.jpg" />
                <p class="mask">
                    <h2><a href=&#39;#&#39;>CSS3不同背景颜色的圆角按钮</a></h2>
                    <p>今天分享下用CSS3来制作一个圆角阴影、渐变色的漂亮的按钮。</p>
                    <a href="#" class="info">Read More</a>
                </p>
            </p>
        </p>
    </body>
</html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：使用css改变下拉列表select框的默认样式介绍Article suivant：CSS3中的变形与动画详细说明

Articles Liés

Voir plus