0

現在、テキスト ボックスの幅にまたがる「日付」の背後にテキストの背景色があります。これを追加して、右側でフェードアウトさせたいと思います。しかし、これを に追加すると、テキストがグラデーションになり、背景が消えます。

background-color:-webkit-gradient(linear, 100% 100%, 0 0, from(white), to(#55565a), color-stop(80%, #55565a));

.date { 
    font-family: sans-serif; 
    font-size: 14px; 
    font-weight: 500;
    color: white; 
    margin-top: 9px;
    opacity: 0.7;
    letter-spacing: 3px;
    text-transform: uppercase;
    background-color: #adadad;
    padding:10px;
    margin-left:-41px;
    margin-right:-41px;
    padding-left:30px;
    display : block;
}

アップデート：

ライトブルーのストライプ:

hr {
margin-top: 10px;
width: 100%;    
color: #B7C3E6;
background-color: white;
height: 25px;
margin: 0px auto;
opacity: 0.2;
border: none;
background: -webkit-gradient(linear, 100% 100%, 0 0, from(white), to(#B7C3E6), color-stop(80%, #B7C3E6));

}

4

1 に答える 1

0

このようなもの？

jsフィドル

.date { 
    font-family: sans-serif; 
    font-size: 14px; 
    font-weight: 500;
    color: white; 
    margin-top: 9px;
    opacity: 0.7;
    letter-spacing: 3px;
    text-transform: uppercase;
    background-color: #adadad;
    padding:10px;
    margin-left:-41px;
    margin-right:-41px;
    padding-left:30px;
    display : block;
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FkYWRhZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgyJSIgc3RvcC1jb2xvcj0iI2FkYWRhZCIgc3RvcC1vcGFjaXR5PSIwLjE4Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  rgba(173,173,173,1) 0%, rgba(173,173,173,0.18) 82%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(173,173,173,1)), color-stop(82%,rgba(173,173,173,0.18)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(173,173,173,1) 0%,rgba(173,173,173,0.18) 82%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(173,173,173,1) 0%,rgba(173,173,173,0.18) 82%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(173,173,173,1) 0%,rgba(173,173,173,0.18) 82%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(173,173,173,1) 0%,rgba(173,173,173,0.18) 82%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#adadad', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */

}

CSS グラデーション ジェネレーターを使用してグラデーションを生成します。

于 2013-08-09T16:34:55.913 に答える