body 的背景图设置

第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放

background: url(imgs/1.jpg)no-repeat;

background-position:center 0;   背景图的定位原点,由于body高不确定

background-attachment:fixed;  背景图片保持固定,不会随页面滚动而滚动

第二种: 这种情况下的背景图会完全的等比缩放, 随着窗口大小改变

首先给html 设置 height:100%;

给body设置

background: url(imgs/1.jpg) no-repeat;

background-size: 100% 100%; 若background-size 值为cover, 此情况下是只要有一边碰到窗口边,就停止, 这种情况下 ,背景图不会等比缩放

同样道理,

body中的元素若想宽高100%,

第一种方式:

先给html设置height:100%; 再给该元素设置width:100%;height:100%;

第二种方式: 给width/height 设置100% 的同时,也要设置position:fixed;

页面若要用到input, 要去掉其默认的 outline 和border, 若使用默认的border,后面js修改时, 第一次交互,会出现微小的像素偏移,建议重置

<linkrel="shortcut icon" href="imgs/favicon.ico"/> 这一句放在<head>中,修改该html网页title中小图标

html中将文字纵向显

对文字对象宽度设置只能排下一个文字的宽度距离，让文字一行排不下两个文字使其文字自动换行，就形成了竖立排版需求

此时需要在该css中加上

word-wrap:break-word; word-break:normal;这个两句 可实现标点换行的,同时整体纵向显示

writing-mode：设置对象书写方向，有两个值，

1.lr-tb：从左向右，从上往下 ，

2. tb-rl：从上往下，从右向左

运行代码发现，IE显示正常，火狐、谷歌浏览器却不支持，所以不建议使用writing-mode属性

css 中的背景图片小技巧和存在的坑的更多相关文章

  1. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  2. css中background-image背景图片路径设置

    web项目中经常会用到background-image:url(),很多小伙伴不知道该怎么写需要的图片路径. 在此之前先要知道几个重要的东东: /  项目根目录         这个不用多说,就是程序 ...

  3. CSS中让背景图片居中且不平铺

    background:url(../images/logo.jpg) no-repeat center ;

  4. css中设置背景图片适应屏幕

    以body为例 body{ background: url(../img/jld.png) no-repeat center center fixed; -webkit-background-size ...

  5. css如何使背景图片水平居中

    CSS中定位背景图片的属性是:background-position,用法background-position 属性设置背景图像的起始位置. 你要水平居中可以: div{background-pos ...

  6. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

  7. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  8. css中的背景、边框、补丁相关属性

    css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

  9. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

随机推荐

  1. 利用callKit实现电话防骚扰

    callKit框架是ios10之后更新的一个框架,代替了原来的CoreTelephony.framework,使用CallKit可以实现电话的拦截 首先创建一个项目之后,创建一个target,选择Ca ...

  2. React服务器渲染最佳实践

    源码地址:https://github.com/skyFi/dva-starter React服务器渲染最佳实践 dva-starter 完美使用 dva react react-router,最好用 ...

  3. python——杂货铺

    三目运算: >>> 1 if 5>3 else 0 1 >>> 1 if 5<3 else 0 0 深浅拷贝: 一.数字和字符串 对于 数字 和 字符串 ...

  4. 使用SSH框架查出的实体集合用AJAX形式刷新到页面JOSONArray报异常

    所报异常:net.sf.json.JSONException: java.lang.reflect.InvocationTargetException 问题根源:数据库中查出的日期是java.sql. ...

  5. bootstrap快速入门笔记（一）

    一,头部基本格式:<head lang="en"> <meta charset="UTF-8"> <meta name=" ...

  6. Golang 在mac上用VSCode开发、Delve调试

    本文包含以下内容: 1.安装VSCode: 2.用Delve调试Go项目: 3.自定义代码片段: 1.安装VSCode 先去下载VSCode,这个链接里面也有官方文档. 安装插件: vscode-ic ...

  7. 内核初始化优化宏(__init, __devinit)

    在内核里经常可以看到__init, __devinit这样的语句,这都是在init.h中定义的宏,gcc在编译时会将被修饰的内容放到这些宏所代表的section. 原文地址:http://blog.c ...

  8. GitHub 入门不完全指南（未完待续）

    我一直认为 GitHub 是一座宝藏,想让更多人的知道它.加入到这个社区中.本人能力有限,如果文中出现不对的地方,欢迎指正交流. 一.前言 大家好,我是削微寒(xuē wēi hán),一个走在进阶路 ...

  9. JSP动态员工登陆案例

    package web; import java.io.IOException; import java.io.PrintWriter; import java.util.List; import j ...

  10. Openstack Swift 原理、架构与 API 介绍

    OpenStack Swift 开源项目提供了弹性可伸缩.高可用的分布式对象存储服务,适合存储大规模非结构化数据.本文将深入介绍 Swift 的基本设计原理.对称式的系统架构和 RESTful API ...