背景图设置

背景图片位置 :

background-position:值1 值2;
(其中值1代表水平方向的位置,值2代表垂直方向的位置)
水平方向可以取默认的left左 center中 right右三个值,也可以写一个具体的偏移数值
垂直方向可以取默认的top上 center中 bottom下三个值,也可以写一个具体的偏移数值

水平方向给正值,图片往右边移动,给负值,图片往左边移动
垂直方向给正值,图片往下边移动,给负值,图片往上边移动

背景为透明:

在 chrome 、firefox、opera 下是这样的:

background-color: rgba(0, 0, 0, 0.3);

在 ie 中一般是这样的:

background-color: rgb(0, 0, 0);

filter: alpha(opacity=30);

想要兼容就全部设置:

filter: alpha(opacity=30);

background-color: rgb(0, 0, 0);

background-color: rgba(0, 0, 0, 0.3);

时间: 2024-10-05 16:29:26

背景图设置的相关文章

#css3# 可以多背景图设置

今天无意发现css3可以多背景图设置,省去了多添加标签或伪类来创造,gooood,真是越来越智能,要紧跟是带你啊. #example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; } 前面url的图片会在上面层. 原文地址:https://www.cnblogs.co

navigationbar背景图 设置左右按钮

// 设置控制器的title self.title = @"O(∩_∩)O哈哈~"; // 设置navigationbar 的样式 // self.navigationController.navigationBar.barStyle = UIBarStyleBlackTranslucent; // 设置navigationbar 的背景图 //[self.navigationController.navigationBar setBackgroundImage:[UIImage im

Java 窗体背景图+设置按钮样式

这个方法应该是比较麻烦的做法,因为背景图是放在窗体的第二层,如果窗体内容层有很多面板,就得挨个设置透明.话不多说,上代码: 1 import java.awt.Color; 2 import java.awt.Dimension; 3 import java.awt.FlowLayout; 4 import java.awt.event.WindowAdapter; 5 import java.awt.event.WindowEvent; 6 7 import javax.swing.Image

文本属性 以及背景图设置 相对 绝对定位 042

文本属性 : 文本对齐 text-align    有 none | center | left | right | justify 文本颜色  color   首行缩进   建议使用 em 即相对内容的大小 2em 即首行缩进2个文本内容字符 文本修饰 text- decoration none(默认) | underline(下划线) | overline(定义文本上的一条线)  | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decora

2018.12.7边界圆角redius,背景图设置,平铺,精灵图,盒子伪类索引

一选择器复习 <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>复习预习</title></head><body> 复习预习 <!-- 1.组合选择器 --> <!-- 群组选择器: div, #div, .div { 该样式块同时控制多个(div, #div, .div) } 每一个选择器位均可以为基础选择

【CSS】css网页背景图片设置

刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); background-repeat:no-repeat; background-attachment:fixed; background-position:0px 0px; } background-image:背景图地址: background-repeat:图片是否重复: 参数: repeat

IE6下 input 背景图滚动问题

ie6 背景图滚动问题: <title>ie6下input背景图滚动问题</title> <style> .box{ height:20px; width:300px; background:url(%E7%BB%83%E4%B9%A0%E8%A1%A8%E6%A0%BC/mon.jpg) no-repeat; background-color:#fcf; border:1px solid #069; } .box input{height:20px; width:30

QT模态对话框用法(在UI文件中设置Widget背景图,这个图是一个带阴影边框的图片——酷)

QT弹出模态对话框做法: 1.新建UI文件时,一定要选择基类是QDialog的,我的选择是:Dialog without Buttons(),如下图: 2.然后在使用的时候: MyDialog dlg(this); dlg.exec(); 如果不加this,则会在任务管理器里面产生一个新的EXE. 3.如果对话框的标题是自定义,不想使用系统的标题,这时候需要在代码中加入: setWindowFlags(Qt::Dialog | Qt::FramelessWindowHint ); setAttr

HTML中设置背景图的两种方式

HTML中设置背景图的两种方式 1.background    background:url(images/search.png) no-repeat top; 2.background-image    background-image:url(images/search.png):    background-repeat:no-repeat;