使用背景图完全位于屏幕的中心 background-position

background-color:#000;
background-size:cover;
background-position:50% 50%;
text-align:center;
color:white;

（background-size是css3中新增的属性，background-size的cover特定值会保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。）

时间： 2024-08-18 21:58:43

使用背景图完全位于屏幕的中心 background-position的相关文章

如何让一张背景图充满整个屏幕

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"

css固定背景图位置实现屏幕滚动时显示背景图不同区域

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .container { width: 100%; padding: 50px 0; padding-bottom: 30px; height: auto; } .container.image-containe

.login{ background-size:cover; position:fixed; top:0; left:0; width:100%; height:100%; background: url("../../assets/login.png")no-repeat center center; } <div class="login"></div> 原文地址:https://www.cnblogs.com/IT123/p/10882

html始终让元素居中显示，背景图铺满随便拖动不出界

首先,写两个class属性 body { margin: 0; padding: 0; height: 100%; width: 100%; background-image: url(../Content/Images/background.jpg); background-repeat: no-repeat; background-size: cover; } .login { height: 300px; width: 400px; border: 1px solid #f00; posi

CSS之全屏背景图

吐槽啦:Yeah 明天就是国庆了!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言归正传,我们回到我们的主题来看看CSS之全屏背景图.Nowdays,满屏大图的网页成为了一种fashion,网页的模板.布局是用CSS.HTML……来设计的,这里就以CSS来聊全拼背景图. 简单点,对于全屏背景图,我们只需用CSS的一个background-size属性就可以了. 当background-size的值

NGUI 背景图自适应

背景图UISprite组件调整如下: UIRoot设置: 不保持比例自适应: 保持宽与屏幕宽一致,高度随宽的缩放比例进行缩放:

cocos2dx 3.x(一张背景图实现循环轮播)

1 // 2 // MainScene.hpp 3 // helloworld 4 // 5 // Created by apple on 16/9/19. 6 // 7 // 8 9 #ifndef MainScene_hpp 10 #define MainScene_hpp 11 12 #include <stdio.h> 13 #include "cocos2d.h" 14 using namespace cocos2d; 15 //定义一个场景类 16 17 cla

html-css控制背景图全屏拉伸不重复显示

在HTML中,当我们设置背景图,只能采用是否重叠.居中.重叠方向这几个选项 CSS3中设置 body { background:#3d71b8 url(../back_main.png); background-size: 100%; background-position:center; } 但是background-siz是CSS 3的属性,并不是所有的浏览器都支持. CSS2中并没有图片全屏拉伸的属性,只能想其他办法. 利用一个DIV层,在里面装载一个IMG标签.然后设置DIV和IMG的大

css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题

最近在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法,大部分的解决方案都是设计一套放大1倍的图标,再压缩显示. 我们都知道<img>标签可以通过固定宽高的方式来压缩大图,从而得到高清的显示效果,而图标一般用背景图来呈现,怎么搞呢?好吧,css3出了一个很牛逼的属性background-size可以直接设置背景图的宽高,直接解决了前者的疑惑. 那么问题来了,我们的网页不