«

图片的使用

MitSeek 发布于 阅读:34 CSS


<img scr="./01.png" alt="美女"> //scr是目录,alt 是说明
border-radius:50px; //圆角边框
opacity:0.5; //透明度
box-shadow:20px 20px #00ff00; //图片阴影
vertical-align: bottom;//文字与画的对齐方式
float:left;//图片左移动
background-image:url("./0.png");  //插入背景图
background-repeat:no-repeat; //设置背景图的平铺方式
background-position:20% 20%;// 设置背景图位置
background: -webkit-linear-gradient(45deg,black,white);//设置渐变背景
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            td{
                width: 200px;
                height: 200px;
                background-image: url("02.jpg") ;/* 插入图片 */
                background-size: cover;/* 图片铺满整个屏幕 */
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td rowspan="2"></td><!-- 添加单元格,横跨2行 -->
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td rowspan="2"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

CSS