web-dev-qa-db-ja.com

bootstrap 4でカードブロックの不透明度を変更する方法

ちょっと私は単純なカードBootstrap 4コンポーネント。

<div class="card">
    <div class="card-header">This is my header</div>
    <div class="card-block">This is my block</div>
    <div class="card-footer">This is my footer</div>
</div>

達成したかったのは、ヘッダーとフッターの不透明度を1にし、ブロックの不透明度を4にすることでした。背景色スタイルでrbgaを運が悪かった

.card-block { background-color: rgba(245, 245, 245, 0.4); }
csstwitter-bootstrapopacitybootstrap-4twitter-bootstrap-4
9
Luke Flournoy

bootstrap class。cardは、設定しようとしていた背景の不透明度cssスタイル。cardをオーバーライドしていました） ！importantキーワードを指定するかどうかに関係なく、-block。

背景スタイルをカードに追加し、。card-headerの個々の不透明度を変更するだけでこれを修正できました。および。card-footerto 1.

.card { background-color: rgba(245, 245, 245, 0.4); }
.card-header, .card-footer { opacity: 1}
4
Luke Flournoy

opacity を使用してみましたか

.special-card {
/* create a custom class so you 
   do not run into specificity issues 
   against bootstraps styles
   which tends to work better than using !important 
   (future you will thank you later)*/

  background-color: rgba(245, 245, 245, 1);
  opacity: .4;
}
<div class="card">
  <div class="card-header">This is my header</div>
  <div class="card-block special-card">This is my block</div>
  <div class="card-footer">This is my footer</div>
</div>
10
happymacarts

これを試してください：

<div class="card-transparent">
  <div class="card-header">This is my header</div>
  <div class="card-block special-card" style="background-color: rgba(245, 245, 245, 0.4); ">This is my block</div>
  <div class="card-footer">This is my footer</div>
</div>
5
Jorge Opazo

このアプローチを試してください

[〜＃〜] html [〜＃〜]

<div class="card text-white bg-success mb-3 mt-4" style= "">
    <div class="card-header">Пользователь</div>
    <div class="card-body special-card" style="">
        <h5 class="card-title">Primary card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>
<div class="card text-white bg-primary mb-3" style=" ">
    <div class="card-header">Привязанный профиль персонала</div>
    <div class="card-body special-card">
        <h5 class="card-title">Secondary card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>
<div class="card text-white bg-danger mb-3" style=" ">
    <div class="card-header">Права доступа профиля персонала</div>
    <div class="card-body special-card">
        <h5 class="card-title">Success card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

[〜＃〜] css [〜＃〜]

 .special-card {
            background-color: rgba(245, 245, 245, 0.4) !important;
        }

enter image description here

1
Developer

あなたのCSSは大丈夫に見えます。問題はあなたのbootstrapファイルがコードをオーバーライドしていることです。これを試してコードをオーバーライドしてください。

.card-block { background-color: rgba(245, 245, 245, 0.4) !important; }

オーバーライドについては this link を参照してください。その特異性と呼ばれる

1
Malcolm Vaz

opacityはbackground-colorとは異なります。opacityは要素の半透明性を設定し、background-colorは背景の色に対してのみ設定します。

これは似ているように聞こえるかもしれませんが、非常に異なっています。

大きな違いは、不透明度がテキストと画像および子要素も半透明にすることですが、背景色は色のみに影響します...ああ、あなたはそれを得ます;）

0
jayenne

アコーディオン内の背景色などを変更するために（私が作成したカスタムsass変数を使用して）私と連携したものを次に示します。

::ng-deep div.card-header:hover {
background-color: var(--subtle-gray);
}

::ng-deep div.card-header a {
background-color: var(--accent);
text-decoration: none !important;
}

::ng-deep div.card-body {
background-color: var(--subtle-gray);
}
0
codeherlife