CSS 网页背景图片设置

最新推荐文章于 2024-05-08 15:26:56 发布
最新推荐文章于 2024-05-08 15:26:56 发布
阅读量8.9k 收藏 35
点赞数 7
分类专栏： CSS 文章标签： CSS 背景图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012664198/article/details/98626600
版权 
<!DOCTYPE html>
<html> 
    <head>
        <meta charset="utf-8">
        <style>
            #login_background{ 
                /* div位置及大小,所在堆叠层设置 */
                position: fixed;
                top:0;
                left: 0;
                width: 100%;
                height: 100%;
                min-width: 1000px;
                z-index: -10;
                /* 背景图片设置 */
                background-image: url(20190712.jpg);
                zoom: 1;
                background-color: #ffff;
                background-repeat: no-repeat;
                background-position: center 0;
                background-size: cover;
                -webkit-background-size: cover;
                -o-background-size: cover;
            }

        </style>
    </head>
    <body>
        <div id="web_content">
            <div id="login_background" alt="图片路径不正确"></div>
        </div>      
    </body>
</html>

 

Daniel799
关注
  • 7
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
CSS网页制作技巧之控制网页背景
01-08
我想大家常常为一些比较合适于自己的网页背景的图片而发愁吧，这个我想也是有的，因为这些图片不是太大就是太小，或者太乱，那么有没有办法让图片能合自己的主页的胃口呢？答案是肯定的。  　　想知道怎么来实现嘛，好吧，大家现在开始跟着我做，我保证大家一定一学就会。不过，我想在网上“成家”的朋友一般分为在网吧里“开业”（就像我一样，刚开始从他人的主页拉相关的代码来改的），还有就是在自己家里用DW或FP之类的专业软件制作好上传的，所以呢，我打算分开两步介绍，首先为在网吧里“开业”的朋友着想吧，最后再简要的介绍一些用DW4做的背景样式。  　　其实总得说来一切都是一样的，只不过是采用的方式不同罢了。好了闲话少
css 设置网页背景图片
qq_41936090的博客
10-22 539
.login-background{ background-image: url("../assets/images/login/background.jpg"); display: flex; justify-content: center; align-items: center; height: 100%; background-size: cover; }
前端、css背景颜色、图片、平铺、图片位置、图像固定、复合写法等、案例分析代码
最新发布
atatsuki的博客
05-08 660
背景图片:实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)二、案例分析五彩导航练习价值:1. 链接属于行内元素, 但是此时需要宽度高度,因此需要模式转换.2. 里面文字需要水平居中和垂直居中. 因此需要单行文字垂直居中的代码.3. 链接里面需要设置背景图片.因此需要用到背景的相关属性设置.4. 鼠标经过变化背景图片,因此需要用到链接伪类选择器.
CSS 设置背景图片
热门推荐
忧郁的蛋的专栏
02-01 3万+
通过上面的代码可知，无法完全实现「设置左侧区域背景图片高度填充整个可视区域，图片宽度自适应」。
用CSS来控制网页的背景
zgqtxwd的专栏
05-01 450
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
css控制背景示例(css设置背景图片、设置背景颜色)
09-25
本篇主要探讨如何利用CSS来设置背景颜色和背景图片。 **一、设置背景颜色** 1. **十六进制颜色值**：`background-color:#ff0000;` 这种方式使用6位数字表示红绿蓝三种颜色的强度，例如#ff0000代表纯红色。 2. **...
CSS实现网页背景图片自适应全屏的方法
09-27
主要介绍了CSS实现网页背景图片自适应全屏的方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css 背景图片平铺技巧
12-09
使用css来设置背景图片同传统的做法一样简单，但相对于传统控制方式，css提供了更多的可控选项，我们先来看看最基本的设置图片的方法。xhtml代码： 复制代码代码如下:”content”> </div> css代码： 复制代码代码...
CSS设置背景图片模糊内容不模糊的解决方法
09-27
本文将详细讲解如何通过CSS设置背景图片模糊，而内容保持不模糊。 首先，我们要理解CSS的`filter`属性。`filter`属性允许我们应用各种视觉效果到元素上，如模糊、灰度、饱和度调整等。在我们的场景中，需要用到的是...
css 网页背景图片 怎样用CSS实现大背景网页效果
09-25
在网页设计制作中经常会遇到这样的问题：用图片做背景时，由于显示器分辨率太大或者图片尺寸太小，在页面的两边或者下部了没有背景图片，使页面变的很僵硬，于是搜集整理一些，晒出来和大家分享
CSS设置html网页背景图片 CSS设置网页背景颜色
weixin_30602505的博客
01-07 6024
http://www.divcss5.com/jiqiao/j768.shtml CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇 本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技巧为主，希望对DIV CSS爱好者有帮助。通常对网页设置背景直接对body设置背景演示即可实现。接下来给大家介绍各种情况下背景处理布局技巧。 无论怎么设置背景都需要用到background...
css实现网页背景图片自适应
liting1996的博客
03-27 1241
文章转载地址 https://www.cnblogs.com/neromaycry/p/8088828.html
如何用CSS来控制网页背景
Penlee's Blog
09-22 1226
2007-09-14 　　大家常常为一些比较合适于自己的网页背景的图片而发愁吧，因为这些图片不是太大就是太小，或者太乱，说到背景也就只有背景颜色和颜色图片，这两个大家一定都知道在里加入bgcolor="#808080"和background="URL"对吧，其实也可以用CSS样式来做的背景，整体配合还是非常不错的。　　·背景颜色 background-color　　这个的默认值是tra
【CSS】CSS 总结 ③ ( CSS 背景设置 | 背景颜色 | 背景图片 | 背景图片平铺样式 | 背景图片位置 | 超大背景图片设置 | 背景附着 | 背景样式简写 | 背景半透明 ) ★
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-06 2089
一、CSS 背景设置 1、背景颜色 2、背景图片 3、背景图片平铺样式 4、背景图片位置 5、超大背景图片设置 网页背景兼容问题 超大背景图片推荐定位 超大背景图片编辑策略 6、背景附着 7、背景样式简写 8、背景半透明
将图片设为背景的代码
qq_44212985的博客
03-31 868
package com.difu.view; import java.awt.*; import javax.swing.*; public class DiFu extends JFrame{ JLabel ja1,ja2,ja3; JPanel jc1; Font a1,a2; public DiFu(){ //Font是设字体 a1=new Font("黑体",Font.BOLD,120...
vant组件ImagePreview动态渲染v-html里的图片不显示bug
超小少的博客
04-13 4245
问题描述： 对元素v-html的内容中图片实现点击放大预览，因为我做的是移动端项目，所以使用的ui框架是vant，用到了图片预览组件ImagePreview， 因为是通过v-html绑定的数据，获取图片的src需要绑定监听事件，ImagePreview有两种使用方法：组件调用和函数调用，起初我使用的是函数调用，组件结构如下： <template> <div class="c...
CSS把图片设置为背景
前端学习笔记
02-23 1万+
先列出几种常用的搭配，方便CV，想了解具体的可以看后面详细介绍第 1 组：刚好填充整个背景区域，不重复background-image : url("~@/路径");第 2 组：从左上角开始，垂直水平重复填充background-image : url("~@/路径");// 宽度 30px ，高度自适应。
HTML/CSS设置网页背景
夏日漱石的博客
03-12 2万+
HTML/CSS设置网页背景
css网页背景图片自适应
01-30
CSS实现网页背景图片自适应全屏的方法有多种，以下是其中一种方法： ```css body { /* 加载背景图 */ background-image: url(images/background-photo.jpg); /* 背景图垂直、水平居中 */ background-position: center center; /* 背景图不平铺 */ background-repeat: no-repeat; /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */ background-attachment: fixed; /* 让背景图基于容器大小伸缩 */ background-size: cover; /* 设置背景颜色，背景图加载过程中会显示背景色 */ background-color: #464646; } ``` 这段CSS代码将背景图片设置为全屏自适应，并且在图片加载过程中显示背景色。其中，`background-image`属性用于加载背景图，`background-position`属性用于设置背景图的位置居中，`background-repeat`属性设置背景图不平铺，`background-attachment`属性设置背景图相对于viewport固定，`background-size`属性用于让背景图基于容器大小伸缩，`background-color`属性设置背景色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值