Question

我想在一个半透明的矩形视图上创建一个透明的矩形视图。

所需：

┌──────────────┐
││
│┌─────────────────────────────── ││transparent││
│└──────────────────────────── │50％透明│
└──────────────┘

实际值：

┌────────────────┐
││
│┌───────────────────────────────── ││50％透明││
│└─────────────────────────────────── │50％透明│
└────────────────┘

代码：

    <View
    android:id="@+id/overlay_half_shade"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/overlay_textguide"        
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:layout_gravity="center"
    android:background="#80FFFFFF" /> // 50% transparent

<View
    android:id="@+id/overlay_transparent"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@+id/overlay_textguide"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:layout_gravity="center"
    android:background="@drawable/focus_thumbnail_slide" /> // custom drawable: transparent rectangle with stroke

我猜中心区域的整体透明度考虑了两个重叠框的透明度;在那里产生50％的透明度。我该如何解决这个问题？

Answer 1

使用像这样的层次结构

<div class="koh-contact-photo">
                            <span><fmt:message key='photo1' /></span> <label id="upload-1" class="button-default" ><fmt:message
                                    key='photo.upload' /></label>
                            <div id="preview-1" class="preview"></div>
                            <button type="button" class="koh-photo-remove remove-button">
                                <span class="icon" data-icon="&#xe605"></span> <span
                                    class="label"><fmt:message key='photo.remove.text' /></span>
                            </button>

                        <!-- The Modal -->
                            <div id="myModal1" class="modal">
                                 <!-- Modal content -->

                                 <div class="modal-content">
                                 <span class="close">&times;</span>
                                 <h3 class="modal-title"> Upload Photo </h3>

                                <div class="modal-inner">
                                <span>Browse for a photo</span> <label id="label-1" style="margin-bottom:20px;" class="button-default browse" for="photo1">BROWSE</label><input id="photo1" type="file"
                                name="photo1" data-parsley-filesize="3"
                                data-parsley-filetype="image/jpeg, image/png, image/gif, image/bmp"
                                data-parsley-trigger="change" />

                                <hr class="modal-hr" />
                                <div class="guidelines-modal">
                                    <p> GENERAL GUIDELINES </p>
                                    <p> Supported files are: .jpg, .gif, .png, .bmp </p>
                                    <p> Maximum File Size: 3MB</p>
                                    <p style="margin-bottom:10px;"> For best results: upload at 400 x 300</p>
                                    <p> Note: images are automatically resized</p>
                                </div>
                                <div class="koh-contact-captcha modal-hr">
                                <!--div class="g-recaptcha" data-sitekey=<fmt:message key='kohlerSterling.google.captcha.key' />></div-->
                                    <!--div class="g-recaptcha" id="recaptcha1"></div-->            
                                    <div id="recaptcha3" class="captcha"></div>
                                    <div class="error-message">
                                        <span><fmt:message key='required.field.text' /></span>
                                    </div>

                                </div>
                                <div class="terms-modal">
                                <div class="checkbox">
                                <input type="checkbox" id="terms-condns" required/>
                                <label style="font-family:Helvetica Neue LT Pro Roman !important;font-size:12px !important;color:#000 !important;font-weight:400 !important;" for="terms-condns">I agree to the <a class="modal-anchor" href="#">Terms and Conditions</a></label>                                           
                                </div>
                                </div>
                                <hr class="modal-hr" />
                                <div class="modal-buttons">
                                    <label class="button-default-modal" style="margin-right:20px;">CANCEL</label>
                                    <label id="input-button-modal-1" class="input-button-modal">UPLOAD</label>
                                </div>

                                </div>
                              </div>
                              <input type="hidden" id="captchaKey" value="<fmt:message key='google.recaptcha.site.key'/>">
                              </div>
                              </div>

Answer 2

您可以尝试这样做并获得预期的输出

<强> inner_shape.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <stroke android:width="70dp" android:height="70dp" android:color="#80B22222" />
</shape>

xml布局中的

<RelativeLayout
    android:id="@+id/overlay_half_shade"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_below="@+id/overlay_textguide"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:layout_gravity="center"
    android:alpha="0.5"
    android:background="@drawable/inner_shape">

透视半透明视图（Android）

2 个答案: