HTML5基础加强css样式篇（文本裁剪,背景裁剪：background-origin，background-position，background-clip）（三十七）

最新推荐文章于 2024-07-09 17:43:22 发布

咸鸭蛋炒饭

最新推荐文章于 2024-07-09 17:43:22 发布

阅读量4.8k

点赞数 3

分类专栏： HTML5基础篇文章标签： html5 css html 经验

本文链接：https://blog.csdn.net/u010853130/article/details/69397279

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.背景定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            /* .box 默认样式 */
            margin: 200px 0 0 200px;
            width: 200px;
            height: 200px;
            background-image: url("img/lzx.JPEG");
            background-repeat: no-repeat;

            border-top: 30px solid transparent;
            border-left: 30px solid transparent;
            border-bottom: 30px solid red;
            border-right: 30px solid red;


            padding: 50px;

            /*
	    background-origin: padding-box|border-box|content-box;
            padding-box	背景图像相对于内边距框来定位。	
            border-box	背景图像相对于边框盒来定位。	
            content-box	背景图像相对于内容框来定位。
			*/
            background-origin: border-box;
            /*background-origin: content-box;*/

            background-position: -50px 0;
        }

        .box:hover {
            /* 鼠标悬浮时样式 */

        }
    </style>
</head>
<body>

<div class="box">HHHHHHHHHHH</div>

<script type="text/javascript">
</script>
</body>
</html>

效果图：

2.背景裁剪：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            /* .box 默认样式 */
            margin: 200px 0 0 200px;
            width: 100px;
            height: 100px;
            background-image: url("img/lzx.JPEG");
            background-repeat: no-repeat;

            border: 30px solid transparent;



            padding: 50px;
	    /*
	    background-clip: border-box|padding-box|content-box;
	    border-box	背景被裁剪到边框盒。	
	    padding-box	背景被裁剪到内边距框。	
	    content-box	背景被裁剪到内容框。
	    */

            background-clip: content-box;
            background-clip: padding-box;
            background-clip: border-box;


        }

        .box:hover {
            /* 鼠标悬浮时样式 */

        }
    </style>
</head>
<body>

<div class="box">HHHHHHHHHHH</div>

<script type="text/javascript">
</script>
</body>
</html>

效果图：

3.文本裁剪：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            /* .box 默认样式 */
            margin: 200px 0 0 200px;
            width: 800px;
            height: 100px;
            background-color: orange;

            /*该属性是webkit内核，blink内核浏览器特有属性，其他浏览器不支持*/
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;

            background-image: url("img/lzx.JPEG");


            font-size: 72px;
            font-family: arial, "Hiragino Sans GB", "Microsoft Yahei", 微软雅黑, 宋体, Tahoma, Arial, Helvetica, STHeiti;
        }

        .box:hover {
            /* 鼠标悬浮时样式 */

        }
    </style>
</head>
<body>

<div class="box">Hello World</div>

<script type="text/javascript">
</script>
</body>
</html>

咸鸭蛋炒饭

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5基础加强css样式篇（文本裁剪,背景裁剪：background-origin，background-position，background-clip）（三十七）

1.背景定位： .box { /* .box 默认样式 */ margin: 200px 0 0 200px; width: 200px; height: 200px; background-image: url("img/l
复制链接

扫一扫