css3背景与渐变

最新推荐文章于 2023-09-26 00:25:57 发布

「已注销」

最新推荐文章于 2023-09-26 00:25:57 发布

阅读量282

点赞数

分类专栏：前端基础入门 css/css3 文章标签： css3

本文链接：https://blog.csdn.net/Allisa_yan/article/details/88989519

版权

* css3背景 *

背景图像区域

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clip</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: none;
}
div {
    width: 800px;
    height: 400px;
    padding: 50px;
    border: 50px solid transparent;  /*边框透明*/
    background: url('bg1.jpg') no-repeat center center;
    background-clip: border-box;
    background-clip: padding-box;
    background-clip: content-box;
}
span.div_border {   /*虚拟边框*/
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: 400px;
    padding: 50px;
    border: 50px solid rgba(255, 0, 0, .25);
}
span.div_padding {    /*虚拟div填充*/
    position: absolute;
    top: 50px;
    left: 50px;
    width: 800px;
    height: 400px;
    border: 50px solid rgba(255, 255, 0, .25);
}
</style>
</head>
<body>
<div></div>
<span class="div_border"></span>
<span class="div_padding"></span>
</body>
</html>

背景图像定位

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clip</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: none;
}
div {
    width: 800px;
    height: 400px;
    padding: 50px;
    border: 50px solid transparent;
    background: url('bg1.jpg') no-repeat 50px 100px;
    background-origin: border-box;
    background-origin: padding-box;
    background-origin: content-box;
}
span.div_border {
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: 400px;
    padding: 50px;
    border: 50px solid rgba(255, 0, 0, .25);
}
span.div_padding {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 800px;
    height:

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3背景与渐变

目录 css3背景背景图像区域背景图像定位背景图像大小多重背景图像背景属性整合 css3渐变线性渐变径向渐变（径-半径） IE浏览器渐变 *** css3背景 *** 背景图像区域 <!DOCTYPE html><html lang="en"...
复制链接

扫一扫