プログラミング css

10

半透明のオーバーレイdivにぼかし効果を適用できません。次のように、divの背後にあるすべてをぼかしたいのですが。これは動作しないjsfiddleです：http ://jsfiddle.net/u2y2091z/ これを機能させる方法はありますか？これをできるだけ複雑にせず、クロスブラウザにしたいと思います。ここに私が使用しているCSSがあります： #overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background:black; background:rgba(0,0,0,0.8); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); }

101 html css blur css-filters

8

CSSのみの画像ホバー上の黒い透明オーバーレイ？

CSSだけでマウスを画像の上に置くと、画像に透明な黒いオーバーレイを追加しようとしています。これは可能ですか？私はこれを試しました： http://jsfiddle.net/Zf5am/565/ しかし、divを表示できません。 <div class="image"> <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" /> <div class="overlay" /> </div> .image { position: relative; border: 1px solid black; width: 200px; height: 200px; } .image img { max-width: 100%; max-height: 100%; } .overlay { position: absolute; top: 0; left: 0; display: none; background-color: red; z-index: 200; } .overlay:hover …

101 css

11

SVGのテキストの背景色

CSSでのtextようにsvgの背景に色を付けたいbackground-color fillテキスト自体に色を付けるに関するドキュメントのみを見つけることができましたそれも可能ですか？

101 css svg background-color

5

ボックスにサイズ/部分的な境界線を宣言する方法はありますか？

CSSでボックスにサイズ/部分的な境界線を宣言する方法はありますか？たとえば350px、最初のボーダーボトムのみを表示するボックス60px。それは非常に役立つと思います。例：

101 css border

3

フルハイトアプリでフレックスボックスと垂直スクロールを組み合わせるにはどうすればよいですか？

flexboxを使用してフルハイトアプリを使用したい。私display: box;はこのリンクで古いflexboxレイアウトモジュール（およびその他のもの）を使用して欲しいものを見つけました：CSS3 Flexboxフルハイトアプリとオーバーフローこれは、古いバージョンのフレックスボックスCSSプロパティのみをサポートするブラウザーに適したソリューションです。新しいフレックスボックスのプロパティを使用したい場合は、ハックとしてリストされているのと同じリンクで2番目のソリューションを使用してみますheight: 0px;。縦スクロールを表示します。他の問題が発生し、解決策よりも回避策であるため、あまり好きではありません。 html, body { height: 100%; } #container { display: flex; flex-direction: column; height: 100%; } #container article { flex: 1 1 auto; overflow-y: scroll; } #container header { background-color: gray; } #container footer { background-color: gray; } <section id="container" > <header id="header" >This …

101 html css flexbox

9

テキストを同じ行で左揃えと右揃えにする方法を教えてください。

同じ行内でテキストの一部を左に揃え、一部を右に揃えるにはどうすればよいですか？ <p>This text should be left-aligned. This text should be right aligned.</p> すべてのテキストを直接インラインで、またはスタイルシートを使用して、左（または右）に配置できます。 <p style='text-align: left'>This text should be left-aligned. This text should be right aligned.</p> 同じ行に保ちながら、対応するテキストを左と右に揃えるにはどうすればよいですか？

101 html css

18

ブートストラップドロップダウンメニューが機能しない

ドロップダウンを機能させるのに問題があります。ナビゲーションバーを完全に表示することはできますが、[ドロップダウン]（どちらか）をクリックすると、ドロップダウンメニューが表示されません。私はこれについて他の投稿を調べてみましたが、誰の問題も解決するものは何もありませんでした。ブートストラップのウェブサイトから直接ソースをコピーしましたが、自分のマシンで動作させることができないようです。誰かアイデアはありますか？私はそれを1時間じっと見ていましたが、何が問題なのか理解できません。 <head> <script src="resource/js/jquery-1.11.0.js"></script> <script src="resources/js/bootstrap.js"></script> <script type="text/javascript"> $(document).ready(function() { $('dropdown-toggle').dropdown() }); </script> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid">  <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> …

100 javascript jquery html css twitter-bootstrap

8

divでのCSSワードラップ

幅が250pxのdivがあります。innertextがそれよりも広い場合は、分解したい。divはfloat：左で、オーバーフローが発生しています。ワードラッピングを使用してスクロールバーを消してほしい。どうすればこれを達成できますか？ <div id="Treeview"> <div id="HandboekBox"> <div id="HandboekTitel"> <asp:Label ID="lblManual" runat="server"></asp:Label> </div> <div id="HandboekClose"> <asp:ImageButton ID="btnCloseManual" runat="server" ImageUrl="Graphics/close.png" onclick="btnCloseManual_Click" BorderWidth="0" ToolTip="Sluit handboek" /> </div> </div> <asp:TreeView ID="tvManual" runat="server" RootNodeStyle-CssClass="RootNode"> <Nodes> </Nodes> </asp:TreeView> </div> CSS： #Treeview { padding-right: 5px; width: 250px; height: 100%; float: left; border-right: solid 1px black; overflow-x: scroll; }

100 css html word-wrap

4

LESS CSSでパーセントからピクセルへ、次にピクセルでマイナスへ幅を計算する

一部の要素の幅をパーセントからピクセルまで計算するため、LESSとcalc（）を使用してマイナス-10pxにします。それが可能だ？ div { span { width:calc(100% - 10px); } } CSS3を使用しているcalc()ため、機能しません。calc(100% - 10px) 例： 100％= 500px、つまり幅= 490px（500-10）の場合。私はテストのためにデモを作りました：http : //jsfiddle.net/4DujZ/55/ だからパディングは言うでしょう：私がリサイズするときはいつも5（10px / 2）。 LESSで実行できますか？私はjQueryとマージンパディングなどの簡単なCSSで行う方法を知っています...しかし、私はLESSで機能的にしようとしますcalc()

100 css less pixel

5

CSS移行時のコールバック

CSSの移行が完了したときに通知（コールバックなど）を受け取ることはできますか？

100 javascript css css-transitions

3

垂直スクロールバーが表示されるようにテーブルの高さを指定するにはどうすればよいですか？

ページに多くの行があるテーブルがあります。テーブルの高さを、たとえば500pxに設定して、テーブルの高さがそれよりも大きい場合、垂直スクロールバーが表示されるようにします。でCSS height属性を使用しようとしましたtableが、機能しません。

100 css css-tables

9

リストアイテムの代替背景色

リストがあり、各アイテムがリンクされています。各アイテムの背景色を変更する方法はありますか？ <ul> <li><a href="link">Link 1</a></li> <li><a href="link">Link 2</a></li> <li><a href="link">Link 3</a></li> <li><a href="link">Link 4</a></li> <li><a href="link">Link 5</a></li> </ul>

100 html css

14

ブートストラップのページネーションの中央揃え

私はこのコードをページネーションで持っています <div class="pagination"> <ul> <li><a href="?p=0" data-original-title="" title="">1</a></li> <li><a href="?p=1" data-original-title="" title="">2</a></li> </ul> </div> しかし、私ulは整列されたままです。ulWRT を中央に配置する方法はありますdivか？私が試したmargin: auto autoし、margin :0 auto彼らが、うまくいきませんでした。

100 html twitter-bootstrap css

30

ブートストラップモーダルは閉じた後も本体にパディング権を追加し続ける

ブートストラップとParseフレームワークを使用して、小さなWebアプリケーションを構築しています。しかし、これらのBootstrapモーダルは、閉じた後、本体にパディング権を追加し続けます。これを解決するには？私はこのコードを私のJavaScriptに入れようとしました： $('.modal').on('hide.bs.modal', function (e) { $("element.style").css("padding-right","0"); }); しかし、それは機能しません。誰かがこれを修正する方法を知っていますか？私のコード： <button type="button" class="btn btn-lg btn-default" data-toggle="modal" data-target="#loginModal">Admin panel</button> <div id="loginModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-sm">  <div class="modal-content">  <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Login</h4> </div>  <div class="modal-body text-center" …

100 javascript jquery html css twitter-bootstrap

3

CSS：特定の要素にコンテンツを追加しない後

CSS :afterプロパティの動作を理解できません。仕様によると（こことここ）：名前が示すように、:beforeおよび:after擬似要素は、要素のドキュメントツリーコンテンツの前後のコンテンツの場所を指定します。これは、:after（または:before）プロパティを持つことができる要素に制限を課すようには見えません。ただし、特定の要素でのみ機能するようです... <p>機能<img>しますか、<input>機能しません、<table>機能しません。もっとテストすることはできますが、要点はわかります。これはブラウザ間でかなり一貫しているように見えることに注意してください。オブジェクトが:beforeand :afterプロパティを受け入れることができるかどうかを決定するものは何ですか？

100 css pseudo-element

タグ付けされた質問 「css」

タグ付けされた質問「css」