Question

我正在尝试为我网站上的三个按钮添加不透明度。我确实让它工作了，但是因为按钮中的文字也受到了影响，所以我尝试在它周围创建一个跨度，自从我开始搞乱它之后，我再也无法使用它了。

有谁看到我做错了什么？我试图添加不透明度的部分是这个div ...

<div class="search_option_container_out">
    <div class="search_option_box">
        <ul>
            <li>Homes</li><!--
            --><li>Agents</li><!--
            --><li>fdfs</li>
        </ul>
    </div>
</div>

这是一个显示按钮正在做什么的小提琴。按钮是三个深灰色按钮。

https://jsfiddle.net/zoue6gv7/

Answer 1

你确实添加了不透明度，按钮是灰色而不是黑色。

如果你添加

    <div class="comment-fields">
        <div class="row commenter-comment">
             <div class="form-group col-md-12">
                    <textarea id="commenter_comment" name="commenter_comment" class="form-control comment-field" title="User's comment" placeholder="Comment Text"></textarea>

              </div>
         </div>

         <div class="row commenter-name-email">
              <input type="hidden" id="commenter_parent" name="commenter_parent" class="commenter-parent" value="0">
         </div>

         <div class="row commenter-captcha">
              <div class="col-md-3 text-right">
                    <a href="javascript:void(0)" class="btn btn-info post-this-comment">Post</a>
              </div>
         </div>

      </div>

$(document).on('click', 'a.post-this-comment', function(){
    var formData = new FormData();
    var arrayelem = commenter_fields();
    var elem;
    for(var i=0, size = arrayelem.length; i<size; i++){
        elem = arrayelem[i];
        formData.append(elem, $('#'+elem).val());
    }
    formData.append('per_page', $('.comments_per_page').val());

    var request = $.ajax({ // push question data to server
        type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
        url         : 'post_this_comment', // the url where we want to POST
        data        : formData, // our data object
        dataType    : 'json',
        processData : false,
        contentType : false
    });     
    request.done(comment_done_handler); 
    request.fail(comment_fail_handler); // fail promise callback
});

您可以看到按钮是半透明的。

如果您只想更改背景颜色而不是所有孩子，则可以使用body { background-color: #009; }代替background-color: rgb(24, 24, 24, 0.6)：

改变这个：

opacity: 0.6

对此：

.search_option_box li {
    display: inline;
    border: 1px solid black;
    border-collapse: collapse;
    line-height: 2em;
    padding: 20px 75px;
    background: rgb(24, 24, 24);
    opacity: 0.6;
    color: #FFFFFF;
}

Answer 2

将其更改为

.search_option_box li {
    display: inline;
    border: 1px solid black;
    border-collapse: collapse;
    line-height: 2em;
    padding: 20px 75px;
    background: rgba(24, 24, 24, 0.6);
    color: #FFFFFF;
}

所以背景会收到不透明度

Answer 3

使用rgba会很有用，也不会影响文字。

.search_option_box li {
display: inline;
border: 1px solid black;
border-collapse: collapse;
line-height: 2em;
padding: 20px 75px;
/*background: rgb(24, 24, 24); */

background: rgba(24, 24, 24, 0.32);  
/* opacity: 0.6; */
color: #FFFFFF;
 }

不透明度不起作用

3 个答案: