精霊図の使い方
8521 ワード
精霊図、背景図、画像は1つのホームページの重要な構成部分なので、学習と整理は少し重要になりました.
CSSスプライトは、実際には、ページ内のいくつかの背景画像を1枚の大きな図(スプライト図)に統合するが、各ページ要素は通常、スプライト図の異なる位置の小さな図だけを必要とし、スプライト図の小さな図に正確に位置決めするには、CSSのbackground-image、background-repeat、background-position属性を使用して背景位置決めを行う必要がある.最も重要なのはbackground-positionプロパティを使用して正確に位置決めすることです.
CSS精霊は実はホームページの中のいくつかの背景画像を1枚の大きい図(精霊図)に統合して、それでは私达がしなければならないのは、小さい図をつなぎ合わせて1枚の大きい図を合成することです.
ほとんどの場合、精霊図はウェブページの美工が作っています.
二:背景画像と挿入画像
転載先:https://www.cnblogs.com/DZzzz/p/9424999.html
精霊技術の使用
CSSスプライトは、実際には、ページ内のいくつかの背景画像を1枚の大きな図(スプライト図)に統合するが、各ページ要素は通常、スプライト図の異なる位置の小さな図だけを必要とし、スプライト図の小さな図に正確に位置決めするには、CSSのbackground-image、background-repeat、background-position属性を使用して背景位置決めを行う必要がある.最も重要なのはbackground-positionプロパティを使用して正確に位置決めすることです.
精霊図を作る
CSS精霊は実はホームページの中のいくつかの背景画像を1枚の大きい図(精霊図)に統合して、それでは私达がしなければならないのは、小さい図をつなぎ合わせて1枚の大きい図を合成することです.
ほとんどの場合、精霊図はウェブページの美工が作っています.
。 。
。
， ， 。
， ， 。 DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
div {
width: 25px;
height: 25px;
background: url("images/taobao.png");
background-position: 0px 0px;
}
div:hover {
background-position: 0px -89px;
}
/* : : 0 */
style>
head>
<body>
<div>div>
body>
html>二:背景画像と挿入画像
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>40-css .htmltitle>
<style>
div{
width: 200px;
height:200px;
background-color: red;
}
.box1{
background-image: url("images/image.png");
background-repeat: no-repeat;
background-position: right bottom;
}
style>
head>
<body>
<div class="box1"> div>
<div class="box2">
<img src="images/image.png" alt="">
div>
body>
html>転載先:https://www.cnblogs.com/DZzzz/p/9424999.html