CSSスプライトとスクリーン

のうちリンク私はCSSへの総初心者ですが - 、ちょうどiPhoneの開発者です、と私は私のアプリを宣伝するために一緒にホームページを置きたい、アプリストアへのリンクが基本的にただ一つの背景画像FacebookとTwitter。CSSスプライトとスクリーン

ホームページの画像（jpeg、1400x776）を私のデザイナーから受け取り、このイメージをスライスしないで別の方法を研究し始めたので、これは私がやりたい最後のものです。 CSSスプライト（文字通り昨日）。私が探していたのは、画像のいくつかの領域をマスクしてリンクを追加することでした。そのため、次のコードを使用していくつかのアイコンをマスクし、リンクを付けてクリック可能にしましたFacebookのような、Twitterのリンクなど）。私の問題は、いったん小さな画面で自分のサイトをチェックすると、完全な画像を見ている間に、「リンク」が画面の外に出ていたことです。

私のindex.html：

<head> 
<title>Delengo Home Page</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style media="screen"> 

#skyline { 
background: url(delengo.jpg); 
background-repeat:no-repeat; 
background-position: top center; 
width: 100%; 
height: 100%; 
margin: -10px; 
padding: 0px; 
min-height: 800px; 
} 

#skyline li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} 
#skyline li, #skyline a {height: 200px; display: block;} 
#twitterlink {left: 1295px; top: 500px; width: 30px; height: 77px;} 


</style> 
</head> 

<body> 
<ul id="skyline"> 
<li id="twitterlink"><a href="http://twitter.com/#!/delengo"></a></li> 
</ul> 
</body> 
</html>

それを修正するための最良の方法は何ですか、これはとにかくCSSのスプリントを利用するための正しい方法ですか？私はPhotoshopに取得することはできどのような方法を避けるためにしようと私のイメージをスライスしています。

PS：イメージをCSSスプライトで1つのファイルに「組み立てる」サイトを訪れ続けているので、CSSスプライトの仕組みが忘れてしまった可能性があります。私の理解では、技術は今、あなたが複数の画像で周りの混乱に必要いけないし、真実ではないということであるあなただけ...すべての要素をあなたに1枚の画像を提供するために、設計者に依頼することができるということですか？

おかげで何百万人も...

出典

2012-03-25 TommyG

CSSスプライトは、パフォーマンスを改善するために、控えめにし、選択的に使用されています。彼らは、「スライスをスキップする」ための方法として使用されていません。あなたは装飾的に使用されるいくつかのボタンやアイコンでスプライトを作ることができますが、それでも、あなたはそれらをカットし、新しいイメージでそれらを再配置する必要があります。私はそれを正しく理解すれば、あなたは自分のやりたいことを見つけたとしても、自分のhtmlを巨大な背景に置くことができると思います。（一度は柔軟で流動的ではありません - 確かに。）

すでに開発者であれば、CSSはかなり簡単です。私はそれを試してみることをお勧めします。

出典

2012-03-25 14:37:28

はい、私は正しく理解しています。上のコードはTwitterのリンクでしようとしていることです。完全に動作しますが、もう一度、1つの画面でのみ動作します。その場合、複数のhttp呼び出しの節約の他に、私がcssスプライトの価値を理解しているかどうかはわかりません。 – TommyG

私のイメージをスライスすることができないと言っていますか？私はPhotoshopが嫌いです... – TommyG

スプライトの唯一の価値はありません。実際には、複数のhttp呼び出しを避けることができます。あなたはいつもあなたのためにそれをするために誰かに支払うことができます:) gplus.gr –

は、この上のW3Schoolsのチュートリアルチェックアウト：

http://www.w3schools.com/css/css_image_sprites.asp

をしかし、基本的に、あなたは、幅と高さを指定します。次に、背景に続いて画像座標をリンクします。

img.sprite1{ 
    width:46px; 
    height:44px; 
    background:url(img_sprites.png) 102 12; 
}

出典

2013-06-08 12:58:42

CSSスプライトとスクリーン

答えて

関連する問題