关于CSS设置页面背景图的一些疑问
关于背景图片的位置其background-position设置背景图片的位置有两种方式,一种是是根据像素设置,第二种根据百分比设置,第一种根据像素的位置是很简单的,只是关于百分比这个设置理解特别容易出现偏差的,先看看一段简单的代码:
.bg-position{
background:url(../../public/images/404.jpg) no-repeat;
margin-top:100px;
margin-left:100px;
background-color:#ccc;
height: 500px;
width: 800px;
background-position: 100px 100px;
}
.bg-position {
background: url(../../public/images/404.jpg) no-repeat;
margin-top: 100px;
margin-left: 100px;
background-color: #ccc;
height: 500px;
width: 500px;
background-position: 20% 20%;
}
关于CSS设置页面背景图的一些疑问的更多相关文章
- vue-cli构建的vue项目打包后css引入的背景图路径不对的问题
使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...
- 导航栏视图设置 tabbleView 是设置总背景图
//导航栏视图设置 tabbleView 是设置总背景图 //默认的时白色半透明(有点灰的感觉), UIBarStyleBlack,UIBarStyleBlackTranslucent ,UIBarS ...
- QT模态对话框用法(在UI文件中设置Widget背景图,这个图是一个带阴影边框的图片——酷)
QT弹出模态对话框做法: 1.新建UI文件时,一定要选择基类是QDialog的,我的选择是:Dialog without Buttons(),如下图: 2.然后在使用的时候: MyDialog dlg ...
- Visual Studio 2017 设置透明背景图
一.前言 给大家分享一下,如何为VS2017设置透明背景图.下面是一张设置前和设置后的图片. 设置前: 设置后: 二.设置背景图片的扩展程序 我们打开VS的扩展安装界面:[工具]->[扩展和更新 ...
- Android 网络url设置View背景图
imgstr为url网络图片地址,topllay是要设置背景的控件: 方法1.Android Glide设置View背景图 Glide.with(this).load(imgStr).asBitmap ...
- 在IDEA中设置页面背景护眼色的方法
在IDEA中设置页面背景护眼色的方法如下:
- DIV+CSS+PS实现背景图的三层嵌套以及背景图的合并
传说中的“三层嵌套技术”. 一.背景图合并: div+css+ps合图相结合的技术:通过精确到1px的css设置,使用ps合成背景图片,特别是小图片合并,来完成页面效果. 首先讲讲三层 ...
- css — 定位、背景图、水平垂直居中
目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; static 静态定位 relative ...
- webpack中,css中打包背景图,路径报错
css-loader: //打包样式中背景图 { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=images/[ ...
随机推荐
- 向通用自动驾驶部门Cruise投资22.5亿美元,软银打得什么主意?
5月29日,加利福尼亚州的一辆特斯拉Model S撞上停在路边的警车.据透露,当时这辆特斯拉正处于自动辅助驾驶即Autopilot模式.而在今年,这已经不是第一次特斯拉自动驾驶模式出问题了.此外,Ub ...
- WEB-文件包含漏洞详解
title date tags layout 文件包含漏洞(File Include) 2018-10-12 post 产生原因: 由于在编写代码时避免麻烦就需要把公用的一段代码写到一个单独的文件里面 ...
- Qt .pro文件详解
在我们创建Qt工程项目时,Qt Creator总会创建一个.pro文件,我们称.pro文件为Qt的工程管理文件.一个工程项目可以包含一个或多个.pro文件.理解和掌握pro文件的用法,将有利于Qt开发 ...
- mysql 多字段更新
更新一个字段当好写 ; Query OK, rows affected (17.36 sec) Rows matched: Changed: Warnings: 问题是想更新多个字段sql serve ...
- 安装php5.4 mv9 +apache2.2+mysql5.5问题好多。
1 网站目录的设置,网站 默认文件的加载. 2 php.ini文件的加载问题.
- 地址SQL文件
文件下载 Beckoning
- JavaScript设计模式一:工厂模式和构造器模式
转自:http://segmentfault.com/a/1190000002525792 什么是模式 前阵子准备期末考试,挺累也挺忙的,实在闲不得空来更新文章,今天和大家说说javascript中的 ...
- win10安装inventor失败,怎么强力卸载删除注册表并重新安装
一些搞设计的朋友在win10系统下安装inventor失败或提示已安装,也有时候想重新安装inventor的时候会出现本电脑windows系统已安装inventor,你要是不留意直接安装invento ...
- echo追加和覆盖
追加: echo " " >> 文件名 覆盖: echo " " > 文件名
- 吴裕雄--天生自然python学习笔记:Python3 SMTP发送邮件
SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式. python的smtplib提供了一 ...