CSS-背景2-图片定位与重复

简介: 背景图片定位与重复源代码:需准备一张,400px*400px的图片。bg.png b .box{ width: 600px; height: 600px; ...

背景图片定位与重复

源代码:
需准备一张,400px*400px的图片。

bg.png

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>b</title>
    <style type="text/css">
    .box{
        width: 600px;
        height: 600px;
        margin : 50px auto;
        border: 1px solid red;
        background: url(bg.png) no-repeat left 100px;
    }
    </style>
</head>
<body>
    <div class="box">
        
    </div>
</body>
</html>

运行效果:

image.png

负值运行效果:

background: url(bg.png) no-repeat -100px -100px;
image.png

重复运行系效果:

background: url(bg.png) repeat -100px  -100px;
image.png
相关文章
|
1月前
|
前端开发 计算机视觉 开发者
利用CSS改变图片颜色的100种方法!
利用CSS改变图片颜色的100种方法!
33 1
|
3月前
|
前端开发 JavaScript
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局
71 0
|
4月前
|
前端开发
【前端|CSS系列第3篇】CSS盒模型、浮动及定位
【前端|CSS系列第3篇】CSS盒模型、浮动及定位
|
4天前
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(下)
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
38 0
|
29天前
css3鼠标悬停图片特效源码
css3鼠标悬停图片特效,图片悬停效果源码,可以在网页上面作为自己的动态加载名片,放到侧边栏或者网站合适的位置即可
14 0
css3鼠标悬停图片特效源码
|
1月前
|
前端开发 容器
CSS背景background八种属性
CSS背景background八种属性
|
1月前
|
Web App开发 前端开发 iOS开发
编程笔记 html5&css&js 008 HTML图片
编程笔记 html5&css&js 008 HTML图片
|
2月前
CSS3图片反射box-reflect属性
CSS3图片反射box-reflect属性
22 0
|
2月前
|
前端开发 JavaScript 定位技术
css3浮动定位
css3浮动定位
41 0
|
2月前
|
Web App开发 前端开发 JavaScript
探索CSS中的粘性定位:解锁网页布局的新可能
这篇文章详细解释了CSS中的sticky定位方式,并讲解了它的工作原理。