表单居中与自适应图片背景图

最新推荐文章于 2021-06-28 20:18:29 发布

奋斗的小菇凉

最新推荐文章于 2021-06-28 20:18:29 发布

阅读量372

点赞数

分类专栏： css

blank

本文链接：https://blog.csdn.net/qq_41418797/article/details/107693798

版权

css 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

表单居中：

form本来就只是一个表单而已，对页面根本就没有布局上的作用.，因此无论怎么设置都是无法居中的，但是依旧有办法解决的；

解决办法：在外面套一层<div style="width:100%;text-align:center"></div>

自适应图片背景图：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>背景图</title>
    <style>
    	#web_bg{
		  position:fixed; /*让整个div固定在屏幕的最上方和最左方*/
		  top: 0;
		  left: 0;
		  width:100%; /*让整个div跟屏幕实现一模一样的大小，从而达到全屏效果*/
		  height:100%;
		  min-width: 1000px;/*min-width是为了实现让屏幕宽度在1000px以内时，div的大小保持不变，也就是说在这种情况下，缩放屏幕宽度时，图片不要缩放（只有在1000px以内才有效）。*/
		  z-index:-10;/*这个的目的是让整个div在HTML页面中各个层级的下方，正常情况下，第一个创建的层级z-index的值是0，所以如果我们这里写成-1也可以实现，
		              	 用index:-10 以此能达到看上去像背景图片，其实是一个最普通的div，只是层级关系变了，才让人看上去看是背景图片。*/
		  zoom: 1; /*为了兼容IE浏览器*/
		  background-repeat: no-repeat;
		  background-size: cover;/*三句是一个意思，就是让图片随屏幕大小同步缩放，但是有部分可能会被裁切，不过不至于会露白，下面两句是为chrome和opera浏览器作兼容。*/
		  -webkit-background-size: cover;
		  -o-background-size: cover;
		  background-position: center 0;/*图片的位置，居中，靠左对齐*/
}
    </style>
</head>
<body>
<div class="wrapper">
    <!--背景图片-->
    <div id="web_bg" style="background-image:url(img/11.jpg)"></div>
    <!--其他代码 ... -->
</div>
</body>
</html>

奋斗的小菇凉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表单居中与自适应图片背景图

表单居中：form本来就只是一个表单而已，对页面根本就没有布局上的作用.，因此无论怎么设置都是无法居中的，但是依旧有办法解决的；解决办法：在外面套一层<divstyle="width:100%;text-align:center"></div>自适应图片背景图：<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/.
复制链接

扫一扫