border与background定位

最新推荐文章于 2022-10-24 10:24:16 发布

kd丹妮儿

最新推荐文章于 2022-10-24 10:24:16 发布

阅读量566

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/kanghui_898/article/details/70757625

版权

web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

#默认是相对左上角定为的

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>制作我的第一个网页</title>
        <style type="text/css">
            
            div{
                width:900px;
                height:500px;
                border:red solid;
                background-image:url(http://img.mukewang.com/52da54ed0001ecfa04120172.jpg);
                background-repeat:no-repeat;
                background-position:40px 40px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

这里写图片描述

#使图片相对右边定为

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>制作我的第一个网页</title>
        <style type="text/css">
            
            div{
                width:900px;
                height:500px;
                border:red solid;
                background-image:url(http://img.mukewang.com/52da54ed0001ecfa04120172.jpg);
                background-repeat:no-repeat;
                background-position:100% 40px;
                border-right:50px solid transparent;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

这里写图片描述