ヘッダー画像の透明度を設定する方法
- Web制作において、ヘッダー画像の透明度を設定する方法について教えてください。
- ヘッダー画像に角丸画像を追加し、その画像のみを透明にする方法はありますか？
- タイトルやサブタイトルは透明度を変えずに表示したいです。どうすれば実現できますか？
- ベストアンサー
opacityなどで背景のみ不透明度にしたいです
閲覧ありがとうございますm(_ _)m WEB制作に関してご質問させて頂きたいことがございます。 ヘッダー画像部分のHTML+CSSコーディングで下記のことをやりたいと考えています。 (1) ヘッダー画像の右上に角丸画像を貼る (2) 角丸画像（ホワイト）の中にタイトルを入れたい (3) ヘッダー画像をもとに角丸画像のみ不透明度を設定したい（タイトル文字は不透明度にしない） ソースは下記になります。 【HTML】 <div id="header"> <div id="headertext"><h1>タイトル</h1> <h2>- サブタイトル -</h2> </div> </div> 【CSS】 #header { margin: 0; width: 1200px; height: 270px; overflow: hidden; padding: 0; background-image: URL("ヘッダー画像") } div#headertext{ position: relative; top: 20px; left: 630px; height: 60px; width: 550px; padding-right: 20px; padding-top: 10px; text-align: right; background-image: URL("タイトル用ホワイト画像"); /*opacity:0.5; background-color: #FFFFFF;*/ /* -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px;*/ } h1、h2のCSSは省略いたします。 (1)と(2)に関しては出来ていますが、(3)に関してはホワイト画像とタイトル、サブタイトル共に不透明になってしまって上手くいきませんでした。 よろしければご教示お願い致します。
- webyou
- お礼率43% (7/16)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
デザインのためにHTML書かない!!--先でデザイン変えるとき困るし、何のために「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」かわからない。 <body> <div class="header"> <h1>ページタイトル</h1> <h2>サブ見出し</h2> <div class="nav"> <h3>ナビゲーション</h3> </div> </div> とする。 html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:1000px;margin:0 auto;padding:5px;} div.header{min-height: 270px; background-image: URL(./images/background/sky.jpg); } div.header h1{ float:right; top: 20px; right: 20px; height: 60px; width: 550px; text-align:center; line-height:60px; position:relative; z-index:10; } div.header h1:before{ content:url(./images/background/white550_60.gif); position:absolute;top:0;left:0; opacity:0.5; z-index:-10 } div.header h2:after{content:"";clear:both;display:block;white-space:pre} div.header div.nav{background-color:yellow;} ・スマホや狭いディスプレイから幅広まで対応 ・ユーザーがフォントサイズを変更してもよい ・border-radiusと、background-color:rgba(255,255,255,0.5)のほうが本来の方法
関連するQ&A
- CSS3で困ってます！
現在、HTML5でサイト書き出し中です。CSS3も使っているのですが、大きな問題が発生いたしまして… 背景のボックスの大きさがbodyの大きさに追随しないんです。ボックスからINFOMATION欄などが飛び出してしまってデザイン的によろしくない感じです。 ボックス要素は、divのidのtopに対して与えています。topはペ0次全部のコンテンツをまとめるためのものです。 今日一日、CSSのソースとにらめっこしたのですがわかりませんでした。皆さんなら、わかると思い頼らせて頂くことにいたしました。どこが間違っているかわかりません！教えてください（涙） CSSは、 @charset "utf-8"; /* CSS Document */ *{ font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } a{ text-decoration:none; } div#top{ width: 920px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; box-shadow: 3px 3px 10px #666; -moz-box-shadow: 3px 3px 10px #666; -webkit-box-shadow: 3px 3px 10px #666; -o-box-shadow: 3px 3px 10px #666; text-align:left; margin:0 auto; } div#header{ text-align:center; } div#banner{ width: 900px; margin: 0px auto; } div#menu{ width: 900px; margin: 0px auto; } div#menu ul { float:left; margin:0; padding:0; height: 40px; text-align:center; } div#menu li { margin:0; padding:0; float:left; font-size:90%; text-align:center; list-style-type:none; width: 225px; -webkit-transition-property: background-color; -webkit-transition-duration: 0.25s; -moz-transition-property: background-color; -moz-transition-duration: 0.25s; -o-transition-property: background-color; -o-transition-duration: 0.25s; background-color: #3C0; height: 40px; } div#menu li span { font-family:verdana; font-size:140%; color:#fff; line-height: 40px; } div#menu li:hover{ background-color: #0F0; } div#contents{ width:900px; height: auto; margin:0 auto; padding: 10px 0; } div#info { float:left; width:450px; } div#info h2{ font-size: 25px; width: 450px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; background-color:#090; color: #FFF; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; margin-top: 0px; text-align:left; } div#info dl dt { clear:left; float:left; width:7em; padding:10px 0.5em; } div#info dl dd { margin-left:0; padding:10px 0.5em 10px 8em; background:#fff url(images/bg_info_line.gif) 0 100% repeat-x; } div#news{ float: right; width: 430px; text-align:left; } こんな感じです。 実際のページはここにあります。 http://skino.cyber-ninja.jp/test/
- ベストアンサー
- CSS
- cssのボタンについて（IEで背景が表示されない）
リンク先を表示するためにcssでボタンを以下のように作製しました。 FireFoxでは正常にきちんと表示されるものの、 IE10で確認したところ、IEでは背景色が表示されませんでした。 そこでzoom: 1;などを足すなどしてみたのですが やはり表示されません。どうしたらいいのかご指南いただけませんか？ どうかよろしくお願いいたします。 a.btn { position: relative; background: -moz-linear-gradient(top,#0099CC 0%,#006699); background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699)); border: 2px solid #FFF; color: #FFF; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3); -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3); text-shadow: 0px 0px 3px rgba(0,0,0,0.5); padding: 10px 10px; margin: 4px 2px 4px 2px; ｝
- ベストアンサー
- CSS
- 背景画像がつられてのびていくのはどうして？
お世話になります。 画像ファイルがno-repeatと指定しているのに bの画像が下だけどんどん長くなっていくのが不思議なんですけど これはどういうことなんでしょうか？ 教えてください。お願いします。 'HTML <div id="1"> <div id="2"> <div id="3"> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div> </div> </div> 'css #1{ width: 900px; margin: 0 auto 0 auto; padding: 0 0 0 0; border-style: none; text-align: left; } #2 { width: 900px; padding: 0 0 0 0; border-style: none; background: #000 url("a.jpg") repeat-y; text-align: left; } #3 { width: 900px; padding: 0 0 0 0; border-style: none; background: url("b.jpg") no-repeat; text-align: left; }
- ベストアンサー
- HTML
- 直接書き込むCSSを外部ファイルに設定したい
CSS初心者です。下記の携帯テンプレートを使ってサイトを作りたいです。 タグに直接書き込むタイプのCSSが多いのですが、 このソースの一部を外部ファイルに設定するには、どういう書き方をしたら良いでしょうか？ 【外部に設定したい項目】 ★タイトル下線のMARGIN-RIGHT: 47% ★真ん中の線(画像位置)BACKGROUND-POSITION: 53% ★一番下線のMARGIN-LEFT: 53%; 外部にしたい理由は携帯とパソコンで見た時にそれぞれ線の位置を変えたいと思って いるからです。出来ますでしょうか？CSSに詳しい方、どうかお願いします(>_<) 【全タグ】 <html> <HEAD> <TITLE>TITLE</TITLE> </HEAD> タイトル <H1 style="PADDING-LEFT: 7px; MARGIN: 0px; PADDING-TOP: 10px; BACKGROUND-COLOR: #ffffff"></H1> <DIV style="BACKGROUND-POSITION: 53% 40%; BACKGROUND-IMAGE: url(http://deai.mokuren.ne.jp/up/src/up3891.gif); BACKGROUND-REPEAT: repeat-y"> <DIV style="BORDER-TOP: #000000 1px solid; MARGIN-RIGHT: 47%"> <P style="PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 7px"></P></DIV> <DIV style="MARGIN-LEFT: 40%; PADDING-TOP: 17px"> <DIV style="WIDTH: 300px; MARGIN-RIGHT: 20px"> <H2 style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 3px; PADDING-TOP: 3px; BACKGROUND-COLOR: #000000"> <font color="#ffffff">コンテンツ</font></H2></font> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説２</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">その他</a></div> </DIV></DIV> <DIV style="MARGIN-LEFT: 53%; BORDER-BOTTOM: #000000 1px solid"> <P style="PADDING-RIGHT: 5px; MARGIN: 0px; PADDING-TOP: 17px" align=right></DIV></DIV> <P style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 5px" align=right> </HTML>
- 締切済み
- CSS
- 背景画像にロゴを重ねる方法を教えてください。
ＣＳＳで背景画像にロゴを重ねる方法を教えてください。 現在、 htmlが以下の状態 <div class="dz_headbar"> <a href="test.html" target="_blank"><img src="title.gif" alt="ロゴ" " style="border:0"></a> </div> cssが以下の状態です。 .dz_headbar { background-image: url("3gradation.png"); background-position: left top; background-repeat: repeat-x; padding-top: 50px; } ヘッダー背景の3gradation.pngの上にロゴ画像であるtitle.gifを重ねたいのですがどうもうまくいきません。 ご教授いただける方何卒宜しくお願いします。
- ベストアンサー
- HTML
- 制作したHTMLとCSSがうまく表示されません・・
3日間色々いじってますが、解決法がわからないため助けてください。 素人なもので、状況説明がわかりづらくてすいません。 WinVistaを使用して、無料テンプレート（配布元：http://pondt.com/内おすすめテンプレート左上 ビルガラス画像のものNo.18を使用）をKompozerで加工しました。 外部cssも使用してますが、フォルダからhtmlを開くと、IEでは正常に表示されますが、firefoxではうまく表示されません。 FFFTPでアップしたHPでは、IE・firefoxそれぞれ違った形に崩れてしまい、うまく表示されません。 （URL http://i.gmobb.jp/aki_enyce/） トップページはまだまともに表示されてますが、他ページが崩れています。 外部cssの一部を抜粋して記載します。 本当に困っています。どなたかお教えいただけますでしょうか。 よろしくお願い致します。 ≪CSS 各ページ共通部≫ div#wrapper{ margin: 0 auto; text-align: left; width: 100%; line-height: 1.8; } div#wrapBg{ border-top: 1px #dedede solid; background: url(../../../images/haikeimain.jpg) no-repeat top; } div#header{ width: 960px; height: 79px; margin: 0 auto; text-align: left; background: url(../../../images/haikeiheader.jpg) no-repeat top; } div#header h1{ float: left; width: 116px; margin: 0px 0px 0px 0px; padding: 0px 0 0 0px; } div#header h2{ float: left; margin-left: 30px; margin-right: 10px; padding-top: 20px; } div#footer{ text-align: center; margin-top: 30px; padding-top: 5px; padding-bottom: 5px; background-color: #D3B688; } ≪トップページ以外の共通ページ（ヘアカタログページを除く）≫ div.wrapBox{ width: 960px; margin: 0 auto; padding: 30px 0; } div#mainContents{ width: 700px; float: right; } /*---- hair catalog画像 ----*/ div#mainContents div.topicsBox{ float: left; margin-left: 20px; margin-bottom: 40px; } div#mainContents div.firstItem{ float: left; margin-left: 30px; margin-bottom: 40px; } /*---- map 画像 ----*/ div#mainContents div.mapBox{ background: url(../../../images/illure/map.png) no-repeat; width: 695px; height: 425px; } div#leftContents{ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background: url(../../../images/baner/shiroki.gif) no-repeat top; width: 200px; float: left; padding: 0px; font-size: 15px; font-weight: bold; }
- ベストアンサー
- HTML
- CSS3の新しい書き方教えてください。
ネットで見ていたところ以下の記述を見つけました。 どうやらCSS3の記述らしいのです。 border: 1px solid #333; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 3px; という記述は何となく分かるのですが、その頭にある・・・。 -webkit- という記述は何を意味するのでしょうか？？ -moz- もそうですね・・・。 先頭の、border: 1px solid #333; に付随する記述だよ！みたいな感じでしょうか？ どなたかお分かりになる方いらっしゃいましたらアドバイスをお願いします。 また、何か参考になるサイトなどもご存知であれば、合わせてお教えいただけますと幸いです。 どうぞ、宜しくお願いします。
- ベストアンサー
- CSS
- z-indexを使用した枠の設定について
z-indexを使用して画像の枠を丸くしたいと思い、 参考URL→http://www.htmq.com/style/z-index.shtml を参考にしたのですが出来ません。 div.imageboxで作った角丸の枠を画像の上から重ねて画像を角丸にしたいのですが、どうすれば良いのでしょうか。 ちなみにcssやhtmlで画像を背景画像として扱うという方法は私事情で出来ません。申し訳ありません。この方法ならば簡単にできるのですが・・・ 下はそのソースです。お願いいたします。 <!-- css --> div.imagebox{ //枠の設定 height:150px; width:150px; display: inline-block; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position:relative; z-index:2; }img.imagebox{ //画像のz-index設定 position:relative; z-index:1; } <!-- html --> <div class="imagebox"> <img src="画像" width="150" height="150" border="0" class="imagebox"> </div>
- 締切済み
- HTML
- CSSを独学中です。が背景の設定がどうしてもうまくいきません。
CSSを使ってwebを作ろうとしている素人です。 header（見出しのロゴなど） main この中にコラムを２つ。左コラムに縦並びメニュー 背景画像あり。 footer（copyright表記など） 色はグレー。 いろいろ参考資料を見ながら、このような構成にしたのですが、 本文(main)のところが、footerと同じグレー１色になってしまい、 予定していた背景画像が表示されません。 とりあえず全体的なレイアウトは何とか大丈夫なようなのですが、 何か原因がお分かりでしたらご教示いただけると幸いです。 おそらく単純なミスなのかもしれませんが。 以下に、cssとhtmlファイルの抜粋を載せておきます。 ------- css ------- body { margin: 0; padding: 0; background-color: #999999; color: #FFFFFF } .header {略} .main { padding: 0px; background-color: #FFFFFF; color: #000000; background-image: url(images/background-check.gif); } .footer{ clear: both; padding: 2px 0 2px 0; border-top: solid 1px #333333; color: #FFFFFF; text-align: center; } p { margin: 0 0 12px 20px; padding: 0; line-height: 130%; color: #000000 } ul { list-style: none; margin: 0; padding: 0; } img { border: none; } /*------ 左の縦メニュー------------ */ .menutate { width: 120px; margin: 0px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } .menutate li a { height: 32px; text-decoration: none; } .menutate li a:link, .menutate li a:visited { color: #FFFFFF; display: block; background: url(images/menutate.gif); padding: 8px 0 0 5px; } .menutate li a:hover, .menutate li #current { color: #990099; background: url(images/menutate.gif) 0 -32px; padding: 8px 0 0 5px; } /*-------- コラム分け---------------- */ .leftcolumn { float: left; width: 120px; } .rightcolumn { float: left; overflow: auto; padding: 0 0 0 20px; } /*----- 本文-------------- */ h1{ padding: 6px 5px 6px 5px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 15px solid #CC0099; background-color: #FFFF99; } h2{ padding: 2px; border-left: 15px solid #CC0099; border-bottom: 1px solid #666666; } ------ html ------ <body> <div class="header"> （略） </div> <!-- メインパート --> <div class="main"> <!-- 左のタテメニュー --> <div class="leftcolumn"> <div class="menutate"> <ul> <li><a id="current" href="index.html">home</a></li> <li><a href="others.html">others</a></li> <li><a href="aboutme.html">about me</a></li> </ul> </div> </div> <!-- 右のコラム --> <div class="rightcolumn"> <h1>いろいろ</h1> <h2>あれこれ</h2> <p>などなど</p> </div> </div> <div class="footer"> Copyright: 2007 xxx. All rights reserved. </div> </body> </html>
- 締切済み
- CSS
- css3でボタンの中にアイコンを表示するには？
css3でリンクボタンのデザインを作っています。 グラデーションや角の丸め、影の付け方はわかりました。 しかしボタンの中にアイコンを入れる方法がネットを探しても全く見つかりません。 アイコン画像を用意して、どのようにしてボタンの中に表示させればよいのでしょうか？ （画像の赤い矢印で示した部分です） 作っているcssは以下のような感じです。 a{ border-top: 1px solid #57b4ff; border-left: 1px solid #57b4ff; border-right: 1px solid #0d78ff; border-bottom: 1px solid #0d78ff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 1px 1px 2px #a2c1dc; -moz-box-shadow: 1px 1px 2px #a2c1dc; background: -moz-linear-gradient(top, #fff, #ccc); background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); } よろしくお願い致します。
- ベストアンサー
- CSS
お礼
ご返事ありがとうございます。 解りやすい解説大変助かりました。 まだ確認していませんが、これから勉強を兼ねて一つ一つ動作の確認をしてみたいと思います。