Q&A
収まるように入れ込むよりトリミングしたほうが簡単そうなきが
https://www.tam-tam.co.jp/tipsnote/html_css/post10099.html
お世話になっております。
丸の中に文字と色付きの帯をつけたいのですが、帯の付け方に悩んでおり、うまくいきません。
【理想】
【現状】
丸の中におさまるように入れ込むことはできますでしょうか。
pug
1.block4clm 2 .blockOne 3 .bg__one 4 .subTitle 5 span テスト
sass
1.block4clm 2 display: flex 3 margin: 60px 0 100px 0 4 5 .blockOne 6 width: 100% 7 background-color: #efefef 8 margin-right: 20px 9 border-radius: 999px 10 11 .bg 12 position: relative 13 height: 0 14 padding-top: (280 / 280)*100% 15 border-radius: 999px 16 &__one 17 @extend .bg 18 background: url(背景画像パス) no-repeat 19 background-size: contain 20 21 .subTitle 22 content: '' 23 display: inline-block 24 position: absolute 25 bottom: 0 26 width: 100% 27 box-sizing: border-box 28 text-align: center 29 background-color: rgba(46,175,255,0.6) 30 padding: 10px 31 font-size: 1em !important
回答1件
0
ベストアンサー
.blockOne クラスが適用されている要素に overflow プロパティを適用することで、質問者さんの実現したいことが行えます(動作確認用リンク)。
Sass
1.block4clm 2 display: flex 3 margin: 60px 0 100px 0 4 5 .blockOne 6 width: 100% 7 background-color: #efefef 8 margin-right: 20px 9 border-radius: 999px 10 overflow: hidden // 追記 11 12 .bg 13 position: relative 14 height: 0 15 padding-top: (280 / 280)*100% 16 border-radius: 999px 17 &__one 18 @extend .bg 19 background: url(背景画像パス) no-repeat 20 background-size: contain 21 22 .subTitle 23 content: '' 24 display: inline-block 25 position: absolute 26 bottom: 0 27 width: 100% 28 box-sizing: border-box 29 text-align: center 30 background-color: rgba(46,175,255,0.6) 31 padding: 10px 32 font-size: 1em !important
投稿2019/10/28 05:21
編集2019/10/28 05:42
総合スコア14731
あなたの回答
tips
プレビュー
