编程学习历程

Uncle_Drew
187 阅读5分钟

因为自己本身不是计算机相关专业，开掘金账户就是记录下自己在学习过程中的心得或者是一些自己有疑问的地方，希望能给未来的自己一些启发。

学习也有两个月了，我接触了PHP，JS，CSS。刚好有个朋友问我是否可以帮他做个课表，我就答应了并做成了如下样式。

朋友说别的都很好，但感觉背景图片太亮，所以我打算调整下背景的透明度（opacity）。 因为我是在table里加的图片链接，自然我直接就在table里加的属性。

<table style="opacity:0.5" background="..."> 但我发现直接在table里加opacity属性除了会让图片半透明，其中的文字也会变浅。

于是我开始在网上和问朋友寻找解决办法，但都没有直接的解决办法。这个时候朋友给我个建议“可以在table外面套一层，并赋予属性”。

我有了一个想法，可以给table套一层div，把图片的大小设置和table一样赋予div。而table给一个白色的背景，并让白色的背景透明化套在图片上，看上去的效果就很像图片透明了一样。实际原理类似于小时候临摹字帖一样，在白宣纸上写字但还是能看见下面的字，只是不清晰而已。

这个是最终源码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Course</title>
    <style>
    #back {
        background : url(https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1573013544&di=2f1076813a58d4442c4ced41b5ede235&src=http://images.669pic.com/element_pic/85/93/63/53/0e0a967e3ca0b6749b7f109d5eb7a1c5.jpg);
        background-size:cover;
        width: 650px;
        height: 550px; 
    }
    </style>
</head>
<body>
    <div id="back">
    <table border="1" width=650px height=500px style="background:rgba(255, 255, 255, 0.5)">
        <tr align="center" height=50px>
            <td width=120px>星期</td>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
            <td>六</td>
            <td>七</td>
        </tr>
        <tr align="center">
            <td>第一节<div>7:40--8:20</div></td>
            <td rowspan="2">语文</td>
            <td rowspan="2">外语</td>
            <td rowspan="2">数学</td>
            <td rowspan="2">生物</td>
            <td rowspan="2">物理</td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <td>第二节<div>8:30--9:10</div></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <td>第三节<div>9:20--10:00</div></td>
            <td rowspan="2">数学</td>
            <td rowspan="2">语文</td>
            <td>生物</td>
            <td rowspan="3">化学</td>
            <td rowspan="2">外语</td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <td>第四节<div>10:30--11:10</div></td>
            <td rowspan="2">外语</td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <td>第五节<div>11:20--12:00</div></td>
            <td>自习</td>
            <td>化学</td>
            <td>体育</td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <td colspan="8">午休zzz~</td>
        </tr>        
        <tr align="center">
                <td>第六节<div>14:30--15:10</div></td>
                <td rowspan="2">物理</td>
                <td rowspan="2">生物</td>
                <td rowspan="2">化学</td>
                <td rowspan="2">语文</td>
                <td rowspan="2">数学</td>
                <td></td>
                <td></td>
            </tr>
        <tr align="center">
                <td>第七节<div>15:20--16:00</div></td>
                <td></td>
                <td></td>
            </tr>
        <tr align="center">
                <td>第八节<div>16:10--16:50</div></td>
                <td>班会</td>
                <td>自习</td>
                <td>物理</td>
                <td>体育</td>
                <td>自习</td>
                <td></td>
                <td></td>
            </tr>
        <tr align="center">
                <td>第九节<div>18:10--21:00</div></td>
                <td colspan="5">自习</td>
                <td></td>
                <td></td>
            </tr>
    </table>
    </div>
</body>
</html>

这种方法需要注意的是，虽然它用到了opacity属性，但和平常opacity值越低越透明不一样的是，你是希望图片透明，而你实际作用的是白色背景板，所以opacity的值越低，白色背景越透明，图片就越清晰。反之opacity的值越高，白色背景越真实，图片就越透明。

这个代码有个小小的问题，背景图加载会慢一点，可能是网页图片的事，渲染花的时间长，建议大家保存本地图片。

如果还有更好的解决办法，欢迎指正~！

avatar
文章
阅读
粉丝