图片替换技术雪碧图技术图片透明技术常用的电商布局方式

Posted 2020-06-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片替换技术雪碧图技术图片透明技术常用的电商布局方式相关的知识，希望对你有一定的参考价值。

###雪碧图技术###

    !DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>sprite雪碧图技术</title>
        <style type="text/css">
            div{
                width: 150px;
                height: 120px;
                background: url("sprites2.png");
                background-position: 0 120px;/*(X轴，Y轴)*/
            }
        </style>

    /head>
    <body>

        <div></div>

    </body>
    </html>

###图片替换技术###

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>图片替换技术</title>
    <style type="text/css">

        h1 {
            width: 168px;
            height: 81px;
            background: url("京东LOGO.png");
            border: 1px solid black;
        }

        a{
            border: 1px solid #ff0000;
            width: 168px;
            height: 81px;
            display: block;
            text-indent: -1000px;
        }

    </style>

    </head>
    <body>

        <h1><a href="定位.html">京东</a></h1>

    </body>
    </html>

###图片透明###

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        img{
            opacity: 0.4;
            /*background: rgba(0,0,0,0.6);*/
        }
        img:hover{
            opacity: 1;
        }
        /*此处不能使用rgba改变背景透明的方式来做效果，因为，rgba只针对背景颜色改变，*/
        /*而opacity针对是整个元素透明效果的改变*/
    </style>
    </head>
    <body>
    <img src="sprites2.png" />
    </body>
    </html>

###图片透明2###

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div {
            background: url("1.jpg");
            width: 220px;
            height: 230px;
        }
        p{
            width: 220px;
            height: 230px;
            /*background: rgba(255,255,255,0.6);*/
            opacity:0.6; /*另一种设置背景透明的方法*/
            background: #ffffff;
            font-weight: bolder;
            color: green;
        }

    </style>

    </head>
    <body>
    <div>
        <p>文字文字文字文字文字文字文字文字</p>
    </div>
    </body>
    </html>

###电商布局###

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>电商常用布局</title>
    <style type="text/css">
        .all{
            border:1px solid black;
            overflow: hidden;
        }
        .div1{
            border: 1px solid #808080;
            float: left;
            padding: 5px;
            margin: 5px;
        }
        .div3{
            text-align: center;
        }
        img{
            border: 1px solid #808080;
        }
        img:hover{
            border: 1px solid #bebebe;
        }
        .div2{
            text-align: center;
            padding: 5px;
        }

    </style>
    /head>
    <body>
    <div class="all">
        <div class="div1">
            <div class="div3"><img src="70x70(1).jpg" /></div>
            <div class="div2">我是第一张图片</div>
        </div>
        <div class="div1">
            <div class="div3"><img src="70x70(2).jpg" /></div>
            <div class="div2">我是第二张图片</div>
        </div>
        <div class="div1">
            <div class="div3"><img src="70x70(3).jpg" /></div>
            <div class="div2">我是第三张图片</div>
        </div>
        <div class="div1">
            <div class="div3"><img src="70x70(4).jpg" /></div>
            <div class="div2">我是第四张图片</div>
        </div>
    </div>
    </body>
    </html>

以上是关于图片替换技术雪碧图技术图片透明技术常用的电商布局方式的主要内容，如果未能解决你的问题，请参考以下文章