前端入门:HTML(CSS背景,视觉差案例)

1.

设置背景颜色:

eg:background-color:green,这个时候背景颜色为深绿色,如果要想让颜色浅一点,一个办法是改变颜色的名称,还有一个办法是改变透明度background-color:rgba(0,255,0,0.1),透明度从0到1,0表示全透明,1表示不透明,其余为中间值。

设置背景图片:

background-image:url(图片路径),

设置背景图片是否平铺:

background-repeat:repeat这是平铺,即一个背景中有多个重复的图片,按规律排布

background-repeat:no-repeat,不平铺,背景中只有一个图片

设置背景图片的位置:

eg:background-position:center center,代表的是水平居中,这个前面值代表水平方向,分别为left(左),center(中间),right(右),后面代表数值方向,分别为top(上部),center(中间),bottom(底部)

设置背景是否跟着文字动的效果:

background-attachment:fixed,代表的是固定背景图不动,只有文字在上下滑动时运动。

使背景铺满整个容器:

background-size:cover

2.css视觉差案例

下一张照片滑动时候,会将上一张照片覆盖掉

案例:

源代码:

html:

<link rel="stylesheet" href="./case-4.css">

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

</body>

css:

* {

margin: 0;

padding: 0;

}

html,body {

height: 100%;

}

div {

height: 100%;

}

.box1 {

background: red;

background-image: url(./picture/bg1.jpg);

background-repeat: no-repeat;

background-size: cover;

}

.box2 {

background: green;

background: url(./picture/bg2.jpg) no-repeat 0px 0px/cover fixed;

}

.box3 {

background: yellow;

background: url(./picture/bg3.jpg)0px 0px/cover fixed;

}

相关推荐
喝拿铁写前端3 分钟前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED9 分钟前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪31 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程41 分钟前
如何测试短信接口
java·服务器·前端
安冬的码畜日常1 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中1 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木1 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师2 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚2 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧2 小时前
HTML字符实体和转义字符串
前端·html