图片遮盖和雪碧图的用法

图片遮盖,当我们想对一张图片设置超级链接时,可以先将该位置设置一个和图片一样大小的div并在div中添加文字设置超链接,再将图片覆盖上去,就有超链接效果,最后将文字移开。

方法:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1{
background: url("京东LOGO.png") no-repeat;
width: 168px;
height: 81px;
border: 1px solid #ff0000;
}
a{
border: 1px solid #000000;
display: block;
width: 168px;
height: 81px;
line-height: 81px;
text-indent: -1000px;
}
</style>
</head>
<body>
<h1>
<a href="">京东</a>
</h1>
</body>
</html>

雪碧图的使用方法:

第一,先插入一张合并的图片集。

第二,开始引用定位,图片的其实点默认为(0,0)

一张方形的图片左上角为定位点,沿X轴和Y轴方向扩张,将每张图片的宽高相减就是下一张图片的位置(注:是以图片左上角的点为基准。)

往上为+,往下为—

eg:div{

    background:url("图片地址")

    background:0px,-120px

    }

时间: 2024-10-14 23:40:34

图片遮盖和雪碧图的用法的相关文章

compass框架的sprite雪碧图的用法简要

---恢复内容开始--- **简介** CSS SPRITE 即 CSS雪碧,即是将诸多图片合成一张图片,然后使用CSS 的background和background-position属性渲染. 这样做的好处是:减少了网站的HTTP请求次数 **compass如何合并雪碧图** 1. 把需要合并的图片(1.png,2.png,3.png…)放在images文件下的新建一个文件夹test 2. 在SCSS文件中 用 @import 指向这些上述图片们,然后compass会自动将这些图片们合并成一个

一些浏览器的兼容和雪碧图的使用

当用li标签包裹住a标签,鼠标经过,让其它元素显示时.要写li:hover   div{各种样式}而不能写ul li  a:hover  div{各种样式} 事件代理:为后来添加的元素添加上事件,优化引擎 - Gecko内核   css前缀为"-moz-"  火狐浏览器 - Presto内核   css前缀为"-o-"             Opera(欧朋) - Trident内核 css前缀为"-ms-"           IE - We

多个图标图片(雪碧图)使用CSS样式显示

现在的网页中显示很多图标算是常态,发现项目中页面上用到的图标都是单个图标单个文件,用的时候直接往页面上挂,这确实很常态. 如果,网站是挂在外网上,或者网速过低,又大量使用图标的情况下,由于浏览器和服务器的并发连接数是受限的,通常是4~8个,那么图标显示过慢或者超时的情况就会发生. 当然了,像采用CDN,或者按照浏览器的并发数对图片文件进行域名分散存储处理也是再好不过的,但不是都有这样的条件. 一般都会把图标文件做的尽可能小,尽管如此,1张50k的文件比起50张1k文件下载起来还是很有优势的. 那

图标字体 VS 雪碧图——图标字体应用实践

本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生成的文件小等优点. 雪碧图 雪碧图实例:淘宝PC端 将多张小图放至一张大图 使用的时候,通过background-position调整显示的位置,如下图所示: 雪碧图的使用方法 使用雪碧图唯一的优点,可以说就是减少浏览器的请求次数.因为浏览器同一时间能够加载的资源数是一定的,IE 8是6个,Chro

关于前端Retina 屏幕兼容和基于Retina 屏幕兼容的雪碧图技巧

由于苹果电脑的普及,所以Retina 屏幕兼容越来越重要,在普通屏幕上正常的背景,在Retina 屏幕上都会发虚. 首先新建一个scss文件,起名为utils.scss ,在文件中写入下面代码: /* Retina 屏幕兼容 */@mixin ratio(){ @media only screen and (-webkit-min-device-pixel-ratio: 1.5){ @content; } @media only screen and (min--moz-device-pixel

图片替换技术、雪碧图技术、图片透明技术、常用的电商布局方式

###雪碧图技术### !DOCTYPE html>     <html lang="en">     <head>     <meta charset="UTF-8">     <title>sprite雪碧图技术</title>         <style type="text/css">             div{                 widt

移动端适配之雪碧图(sprite)背景图片定位

为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top,所以定位起来会比较准确.简单.但是在移动端就不一样了,各种手机的屏幕大小不一样,很难做到使用sprite图然后根据background-position来定位.所以普遍的做法都是使用单张图片,然后使用background-size: cover|100%|contain来控制背景图的大小.其实这样

CSS基础知识之背景图片样式属性、雪碧图、列表导航栏、超链接的伪类样式、盒子模型、overflow、圆角弧度

目录: 背景图片样式属性 雪碧图 列表导航栏 超链接的伪类样式 盒子模型. overflow. 圆角弧度 背景图片样式属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #imgContainer { border: 20px dotted yellow; padding: 50px; height: 400p

gulp-css-spriter 将css代码中的切片图片合并成雪碧图

NPM地址:https://www.npmjs.com/package/gulp-css-spriter/ 配置gulpfile.js: var gulp = require('gulp'), minifyCSS = require('gulp-minify-css'),    spriter = require('gulp-css-spriter'); gulp.task('css', function() { var timestamp = +new Date();    //需要自动合并雪