当前位置:首页 > CSS教程 > 正文内容

css实现背景图满屏效果_css教程,css,背景图

搜教程4年前 (2020-03-14)CSS教程174

css如何实现表单验证功能_css教程

本文为大家介绍了css实现表单验证功能的方法,具有一定的参考价值,希望可以帮助到大家。我们可以通过pattern属性来自定义正则表达式。

想让整个界面有一个背景图片,自然想到的是在body上加background,代码如下:

body {
     width:100%;
     height: 100%;
    /* 加载背景图 */
    background: url("../static/images/index/backImg.jpg") no-repeat;
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
    background-attachment: fixed;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    /* 设置背景颜色,背景图加载过程中会显示背景色 */
  background-color: rgba(41, 50, 39, 1);
}

发现body的高度为0,所以图片不能显示;解决办法是给html设置宽高各100%,这样body就有值了,背景图片完整的充满整个屏幕。

(推荐教程:CSS教程)

扩展知识:

url(images/beijing.png)——图片路径的位置;

css如何实现图片堆叠效果_css教程

本文来自CSS入门教程栏目,文中为大家介绍了css实现图片堆叠效果的方法,具有一定的参考价值,希望可以帮助到大家。要实现图片堆叠效果,我们可以使用css的伪类:before来实现。

no-repeat—— 图片不重复;

center 0px——center是距离页面左边的定位,0px是距离页面上面的定位;

background-position: center 0——就是图片的定位,同上;

background-size: cover;——把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中;

min-height: 100vh;——视窗的高度,“视区”所指为浏览器内部的可视区域大小,即window.innerWidth/ window.innerHeight大小。

相关视频教程推荐:css视频教程

以上就是css实现背景图满屏效果的详细内容,更多请关注ki4网其它相关文章!

css如何实现n宫格布局_css教程

css实现n宫格布局的思路是:1、整体使用flex布局,方便内部元素水平/垂直居中;2、使用正方形占位;3、设置样式【position:absolute;top:0;left:0;right:0;bottom:0】。

扫描二维码推送至手机访问。

版权声明:本文由搜教程网发布,如需转载请注明出处。

本文链接:https://www.sojiaocheng.cn/17375.html

标签: css背景图
分享给朋友:

“css实现背景图满屏效果_css教程,css,背景图” 的相关文章

perspective属性怎样用【css教程】,perspective属性,CSS3

perspective属性怎样用【css教程】,perspective属性,CSS3

perspective属性是用来定义 3D 元素距视图的间隔,以像素计;它许可你转变 3D 元素检察 3D 元素的视图。 CSS3 perspective属性 作用:perspective 属性定义 3D 元素距视图的间隔,以像素计。该属性许可您转变 3D 元素检察 3D 元素的视图。当...

react中运用css的七种要领引见(附代码)【css教程】,react.js,css3,scss

react中运用css的七种要领引见(附代码)【css教程】,react.js,css3,scss

本篇文章给人人带来的内容是关于react中运用css的七种要领引见(附代码),有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。 第一种: 在组件中直接运用style 不须要组件从外部引入css文件,直接在组件中誊写。 import React, { Component } f...

css sprites怎样运用?【css教程】,css sprites

css sprites怎样运用?【css教程】,css sprites

CSS Sprites在国内许多人叫css精灵,是一种网页图片运用处理方式。它许可你将一个页面涉及到的一切零碎图片都包含到一张大图中去,这样一来,当接见该页面时,载入的图片就不会像之前那样一幅一幅地逐步显示出来了。 CSS运用方法 CSS Sprites实在就是把网页中一些背景图片整...

运用<nav>链接滚动到页面响应部份【css教程】,CSS

运用

跟着网站页面的涌现,运用转动作为导航长页面的要领变得愈来愈盛行。运用JS + jQuery代码,能够轻松地在nav元素中设置链接以转动到页面的响应部份。假如你愿望在JS不存在时很好地降级,请将锚标记添加到页面中,本篇文章就来给人人引见关于运用<nav>链接转动到页面响应部份。...

CSS言语入门视频教程引荐【css教程】,CSS,视频教程

CSS言语入门视频教程引荐【css教程】,CSS,视频教程

html和css是构成WEB前端开辟最中心的部份。在网页制造时运用CSS,能够有效地对页面的规划、字体、色彩、背景和别的结果完成越发准确的控制。那末CSS言语入门?怎样进修?本日ki4网在这里给人人引荐8个CSS免费典范视频教程供人人进修,愿望对人人有所协助。 1、《CSS视频教程-玉女心经版...

css中的hover怎样用【css教程】,hover,hover选择器

css中的hover怎样用【css教程】,hover,hover选择器

hover用于挑选鼠标指针浮动在上面的元素,它有以下几种用法:直接在悬浮元素上转变款式,转变子元素的款式,转变同级元素的款式以及转变就近元素的款式等 在CSS中有个hover属性,当鼠标移上去的时刻能够将其激活,它能够用来完成类似于js的一些功用。接下来在文章中将为人人细致引见hover属性怎...