背景图片的正确导入方式

例:将此图片作为背景图片导入。

<ul id="skin">
  <li id="skin_0" title="蓝色" class="selected">深蓝色</li>
  <li id="skin_1" title="紫色">紫色</li>
  <li id="shin_2" title="红色">红色</li>
  <li id="shin_3" title="蓝色">淡蓝色</li>
  <li id="shin_4" title="黄色">黄色</li>
  <li id="shin_5" title="绿色">绿色</li>
 </ul>

#skin{
 width: 120px;
 border: 1px solid #ccc;
 background-color: #fff;
 margin: 10px;
 padding: 4px;
}
#skin li{
 float: left;
 width: 15px;
 height: 15px;
 text-indent: -9999px;
 overflow: hidden;
 display: block;
 cursor: pointer;
 margin-left: 4px;
 background-image:url(images/theme.gif); 
}
#skin_0{
 background-position: 0px  0;
}
#skin_1{
 background-position: 15px 0;
}
#shin_2{
 background-position: 35px 0;
}
#shin_3{
 background-position: 55px 0;
}
#shin_4{
 background-position: 75px 0;
}
#shin_5{
 background-position: 95px 0;
}
#skin_0.selected{
 background-position: 0px 15px;
}
#skin_1.selected{
 background-position: 15px 15px;
}
#shin_2.selected{
 background-position: 35px 15px;
}
#shin_3.selected{
 background-position: 55px 15px;
}
#shin_4.selected{
 background-position: 75px 15px;
}
#shin_5.selected{
 background-position: 95px 15px;
}

图片先通过background-image导入,在通过background-position调整位置。

注:通过背景导入的图片无法改变其大小,通过img导入的图片可以改变大小。

时间: 2024-10-14 08:14:39

背景图片的正确导入方式的相关文章

设置背景图片的两种方式,并解决手机端背景图片高度自适应问题

1 设置背景图片的两种方式: 方式一: <img src="../img/10.jpg"/ class="back" id="Background"> .back{ position: fixed; width: 100%; height: 100%; display: block; z-index: -100; } 方式二:div class="body" id="Background">

webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径,那么要解决这种问题,就得引用相对路径. 解决办法 打开webpack.prod.conf.js 找到output:增加 publicPath: './', 即可,如图. 那么这样后,资源的引用路径就正确了. 当然在config文件夹下的index.js中修改 assetsPubl

样式表:样式背景,字体,对齐方式,边界边框。【0909下】

样式表: 样式;     大小:   width 宽度   height 高度 背景:    backyound—color  背景色 backyound—imahe   背景图片 backyound—repeat   背景图片的平铺方式 backyound—position    背景图片的位置 backyound—attachment    设置图片是否滚动 backyound—size    背景图片的大小. 比如:200px,200px 字体: font—familg   字体样式 fo

溢出处理、盒子模型、背景图片、float(浮动)

一.overflow:溢出内容的处理     overflow:hidden;  溢出内容隐藏(在父元素内使用,可以清除子元素浮动对父元素的影响)    overflow:auto; 自动滚动(有溢出产生滚动,没有就不产生滚动条)    overflow:scroll; 不管有没有溢出均产生滚动条 图片精灵技术    服务器    前项目部署到服务器上,图片当然也是在服务器上.网页如果要显示a图片,如果显示b图片,如果套很多图片 二.盒子模型:        margin(外边距).border

UIView设置背景图片几种方式

一 . 设置UIView的背景图片 1.将图片作为UIView的背景色,该方法过于占内存,不建议使用. //1.imageNamed方式 self.view.backgroundColor = [UIColorcolorWithPatternImage:[UIImageimageNamed:@"image.jpg"]]; //2.方式    NSString *path = [[NSBundlemainBundle]pathForResource:@"image"o

iOS-UIView-设置背景图片4种方式

一 . 设置UIView的背景图片 1.将图片作为UIView的背景色,该方法过于占内存,不建议使用. //1.imageNamed方式 self.view.backgroundColor = [UIColorcolorWithPatternImage:[UIImageimageNamed:@"image.jpg"]]; //2.方式    NSString *path = [[NSBundlemainBundle]pathForResource:@"image"o

代码方式给控件添加背景图片(WPF)

wpf中常常需要给控件添加背景图片,下边以wrapPanel为例,使用代码添加背景图片 WrapPanel xwraPanel = new WrapPanel(); ImageBrush ximgBrush = new ImageBrush(); Uri xuri = new Uri("pack://application:,,,/Images/JXimgs/MeterLayout.png", UriKind.Absolute); //注意这个的写法 ximgBrush.ImageSo

Android Studio 设置背景图片

Android Studio 开发环境的主题背景是可以修改的,网上可以可以找到很多主题插件来丰富你开发桌面. 同时我们还可以修改背景图片,使你的开发不在单调,先上图: 怎么样,效果还可以吧,有种心旷神怡的感觉吧!!(嘿嘿) 下面我们介绍一下安装过程: 如果想添加图片背景我们需要安装一个插件,Preferences -->Plugins  搜索 Sexy Editor  (前提是你没有安装过哦),看图: OK,到这一步呢,你已经成功一半了,安装完毕后在你的Other Setting下看到Sexy

CTreeCtrl中使用CxImage添加背景图片,以及给字添加背景图片

在CTreeCtrl中加载背景图片,网上有很多例子,有的可行有的不行,这两天一边看资料一边整理,自己写了一个用CxImage加载图片的方法,大家可以参考下.有的地方还没有完善,不过基本功能可以实现,而且添加图片后屏幕不闪烁.已经试过了. SetReDraw():保证其不要在子节点弹出时重画,而是在子节点已经扩展后重画 在做程序时,遇到了一个很白痴的问题,就是我想要实现鼠标滚动消息时,写了之后调试代码进不去,经过我查看,把ON_WM_MOUSEWHELL放到前面就可以了 (一)使用CxImage可