2017-11-03 10 views
0

私は、左端に透明なアクセントを持つタイトルバーを持っています。また、堅実な背景色もあります。私はそれが敏感でタイトルの長さを受け入れる必要があります。 IDKなぜこのような痛みですが、私はすべてを試しました。透明なアイコンと堅実な背景色を持つ反応タイトル

私はバックグラウンドとして静止画像を試しましたが、タイトルが2行高い場合はサイコロです。

ソリッドアイコンの場合は簡単です。イメージをドロップして背景色を追加するだけです。背景色を凌駕する「透明な画像」はないので、私は失われてしまいます。

mockup

単色の背景と透明性を兼ね備えする方法上の任意のアイデアを、背景が透明に記入言っていない?ここで

は、最終製品のように見えるために必要なものですか

更新:私の現在のコードはあまり良くありませんが、ここにあります。ほとんどの幅で十分に機能しますが、幅が狭くなると災害です。私はあなたの提案を試し、物事がどのようにうまくいくかを伝えます。みんな、ありがとう!!!

HTML 

.titlebox-wrap { 
 
    width:90%; 
 
    position:absolute; 
 
    top:-2em; 
 
    left:-3em; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.titlebox-hook { 
 
    background: url("images/blue-cap.png") no-repeat; 
 
    background-size:cover; 
 
    background-position:left center; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:10%; 
 
    height:100%; 
 
    z-index:-1; 
 
} 
 
.titlebox-text { 
 
    background:#0d2240; 
 
    margin:0; 
 
    margin-left:9.8%; 
 
    padding:.7em 1em .7em 0; 
 
    max-width:80%; 
 
    float:left; 
 
    -webkit-border-radius:.2em 3em 3em .2em; 
 
    -moz-border-radius:.2em 3em 3em .2em; 
 
    border-radius:.2em 3em 3em .2em; 
 
}
<div class="titlebox-wrap"> 
 
    <div class="titlebox-hook"></div> 
 
    <span class="titlebox-text">THIS STUPID THING NEEDS TO DICTATE LENGTH</span> 
 
</div>

+0

コードを投稿すれば、そこから開始します。 – Cons7an7ine

+0

が更新されました。見ていただきありがとうございます。 –

答えて

0
  • 透明形状の上下大固体着色領域と、唯一の幅透明切欠部としての背景画像を作成するが、非常に高い - あなた生成する画像の高さを決定するために、このデザインエレメントが合理的に必要とするテキストの行数を決定する必要があります。
  • 擬似要素のbg画像を使用してください
  • ラッパー

のフレキシボックスの子供の実際の要素にここ(https://codepen.io/RwwL/pen/yPOadeから)フレキシボックスを使用した例だ負margin又はtransform: translateX()を使用してテキストを保持素子外部擬似要素こと、又は位置:

ここで

html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    padding: 5%; 
 
    height: 100%; 
 
    font-family: sans-serif; 
 
    background: linear-gradient(to bottom, red, orange); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.titlebox-wrap { 
 
    width:90%; 
 
    margin:0; 
 
    padding:0; 
 
    display: flex; 
 
} 
 
.titlebox-hook { 
 
    width: 40px; 
 
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAMgCAYAAADVw8ezAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAA6hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxNy0xMS0wM1QxNzoxMTo5MDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAzLjc8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgICAgPHRpZmY6Q29tcHJlc3Npb24+NTwvdGlmZjpDb21wcmVzc2lvbj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ+MjwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPHRpZmY6WVJlc29sdXRpb24+NzI8L3RpZmY6WVJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOlhSZXNvbHV0aW9uPjcyPC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTAwPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+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'); 
 
    background-repeat: no-repeat; 
 
    background-position: left center; 
 
} 
 
.titlebox-text { 
 
    background:#0d2240; 
 
    flex: 1; 
 
    color: #fff; 
 
    padding :.7em 2em .7em 0; 
 
    max-width:80%; 
 
    float:left; 
 
    -webkit-border-radius:.2em 3em 3em .2em; 
 
    -moz-border-radius:.2em 3em 3em .2em; 
 
    border-radius:.2em 3em 3em .2em; 
 
}

はセミチで、あなたのイメージを設定する方法を示します例ですircleの代わりに、あなたの空想の花の形のパンチアウトが、それは同じように動作します:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAMgCAYAAADVw8ezAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAA6hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxNy0xMS0wM1QxNzoxMTo5MDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAzLjc8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgICAgPHRpZmY6Q29tcHJlc3Npb24+NTwvdGlmZjpDb21wcmVzc2lvbj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ+MjwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPHRpZmY6WVJlc29sdXRpb24+NzI8L3RpZmY6WVJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOlhSZXNvbHV0aW9uPjcyPC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTAwPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+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

-2
img { 
Background: 100%; 
background: url(); 
} 



img { 
width: 100%; 
display: block; 
} 
0

だけ速くアイデア(それが動作するgaranteedない):として飾りの逆を試していない理由svg(色をスタイルすることができます)を青色で塗りつぶし、残りはあまり複雑ではありませんか?

関連する問題