背景色を重ねることはできますか?

♥ 0

いいねをした人: 居ません

このトピックには3件の返信、3人の参加者があり、最後にHisanori Gotoにより3年、 6ヶ月前に更新されました。

4件の投稿を表示中 - 1 - 4件目 (全4件中)

投稿者

投稿
2021年5月1日 5:24 PM #74766
Hisanori Goto
閲覧者

♥ 3
お世話になります。以下の通り、質問させてください。

【お使いの Snow Monkey のバージョン】13.2.3
【お使いの Snow Monkey Blocks のバージョン】10.3.3
【お使いの Snow Monkey Editor のバージョン】4.1.0
【お使いのブラウザ】Chrome
【当該サイトのURL】

### 実現したいこと

以下の画像のように、背景色を2枚重ねたいです。（上は白、下は赤）

(※黒部分は原稿のため、隠させていただいております）

### 試したこと

現状、sectionブロックで白色部分を作り、追加cssで赤部分の追加を試みましたが以下の画像の状況です。(※黒部分は原稿のため、隠させていただいております）
```
.greetings>.smb-section__background:after {
  content: ''";
  background-color:rgba(240, 52, 2)!important;
  left: 10;
  right: 10;
  top: 10;
  bottom: 10;
  z-index:-1;
}
```
section(ブロークングリッド）では影をつけられるので、こちらも試してみましたが、あくまでも画像に対する影であり、今回の実装希望内容とは違うと考えております。

### お聞きしたいこと

そもそも上記のような実装方法は、可能でしょうか…?

可能である場合、実装方法をご教示いただけますと幸いです。よろしくお願いいたします。

♥ 0

いいねをした人: 居ません
2021年5月1日 9:13 PM #74781

GONSY
参加者

♥ 841

どんな要素（ブロック）かにもよりますが、背景が白の要素にbox-shadowで背景をつけるのではダメですか？

box-shadow: 10px 10px 0 rgb(240, 52, 2);

♥ 2

いいねをした人:

2021年5月2日 12:27 AM #74789
まーちゅう
参加者

♥ 367
見た目は、GONSYさんのと同じですが
セクションブロックの class が、greetings の場合
```
.greetings {
    background-color: rgb(240, 52, 2);
    transform: translate(10px, 10px);
}
.smb-section__background,
.smb-section__inner {
    transform: translate(-10px, -10px);
}
```
で、どうでしょうか？

♥ 2

いいねをした人:
2021年5月2日 9:30 PM #74825
Hisanori Goto
閲覧者

♥ 3
GONSY様

まーちゅう様

早速お返事いただきまして、ありがとうございます。
```
.greetings>.smb-section__background{
  box-shadow: 10px 10px 0 rgb(240, 52, 2);
}
```
でいけました。本当にありがとうございました。

♥ 1

いいねをした人:
投稿者

投稿