CSS背景图怎么自适应全屏(手机或者电脑)
#demo{
background-img:url(../bg.png);
--(1)适用于上半部分背景图片,下半部分纯色
将背景图像等比缩放到完全覆盖屏幕,背景图有可能超出屏幕(容器)
background-size:cover; --(2)将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。
background-size:contain;
--(3)最简单粗暴的方法,缺点会给背景拉伸变形;
background-size:100% 100%;
}
CSS背景图怎么自适应全屏(手机或者电脑)的更多相关文章
- CSS背景图拉伸自适应尺寸,全浏览器兼容
突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉 ...
- CSS背景图拉伸自适应尺寸
.bg{ background:url(images/test.jpg); filter:"progid:DXImageTransform.Microsoft.AlphaImageLoade ...
- 【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...
- css背景图与html插入img的区别
一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...
- Lodop打印控件不打印css背景图怎么办
background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法 ...
- html的css背景图的repeat
HTML里background-image中,可以设置background-repeat实现平铺,前面博文中关于css样式换行的(相关博文:超文本css样式换行),其中有个三个div组合的,中间的di ...
- css背景图自适应全屏显示
前几天我在写一个前端页面的时候,需要用到全屏背景图,但是怎么写都不行(要么不全屏,要么不兼容Bootstrap的响应式布局).对,是我腊鸡 后来我在网上找的时候找到一个大神写的笔记,参(照)考(抄)之 ...
- CSS实现网页背景图片自适应全屏
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- CSS实现网页背景图片自适应全屏,自适应背景图片
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
随机推荐
- 【ACM】poj_2092_Grandpa is Famous_201308021920
Grandpa is FamousTime Limit: 2000MS Memory Limit: 30000K Total Submissions: 7256 Accepted: 3670 De ...
- ASP.NET--MVC--伪静态
原文地址 以前伪静态很流行主要是为了SEO优化排名,现在搜索引擎对静态网站和动态网站的权重差不多了,就没有必要再伪静态了,个人意见,仅供参考. 有些客户要求设置静态的,为了完成需求,而且更简单的做法就 ...
- [LeetCode]Wildcard Matching 通配符匹配(贪心)
一開始採用递归写.TLE. class Solution { public: bool flag; int n,m; void dfs(int id0,const char *s,int id1,co ...
- 【cocos2d-x 3.7 飞机大战】 决战南海I (八) 背景移动
採用双层背景.这样效果更好 .h class BackgroundMove : public Layer { public: BackgroundMove(); ~BackgroundMove(); ...
- Lightoj 1112 - Curious Robin Hood 【单点改动 + 单点、 区间查询】【树状数组 水题】
1112 - Curious Robin Hood PDF (English) Statistics Forum Time Limit: 1 second(s) Memory Limit: 64 MB ...
- HDU 1754 I Hate it (线段树最大值模板)
思路:与我发表的上一遍求和的思想一样 仅仅是如今变成求最大值而已 AC代码: #include<iostream> #include<cstdio> #include< ...
- canvas的自动画图
<!DOCTYPE HTML><html><body> <canvas id="myCanvas" width="200&quo ...
- 利用阿里云加速Docker For Windows
1.进入阿里云的容器镜像服务,找到镜像中心的镜像加速器. https://cr.console.aliyun.com/cn-hangzhou/instances/mirrors 2.进入Docker ...
- linux 免密登陆(超简单)
一.客户端生产公钥 在windwos上 生成公钥私钥前,先下载git哦 ssh-keygen -t rsa# 记住下方方框内公钥保存地址, 二.查看自己用户的登录地址 cat /etc/passwd ...
- SMTP协议详解
简单邮件传输协议 (Simple Mail Transfer Protocol, SMTP) 是在Internet传输email的事实标准. SMTP是一个相对简单的基于文本的协议.在其之上指定了一条 ...