Question

如何将图标阴影添加到使用css附加的图像？

.create-option-thumb-img {
    box-shadow: 0px 1px 3.36px 0.14px rgba(0, 0, 0, 0.14);
}

.create-option-thumb-img img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    z-index: -1;
}

我上面的代码和以下HTML代码：

<div class="create-option-thumb-img">
   <img src="" />
</div>

Answer 1

只需调整盒子阴影样式即可。无论你想要什么。感谢。

＆＃13;

.create-option-thumb-img  {
    width: 20%;
    height: auto;
    vertical-align: bottom;
    z-index: -1;
    box-shadow: 0px 9px 250px -15px #000;
}

＆＃13;

<div class="create-option-thumb-img">
   <img src="https://developer.chrome.com/extensions/examples/api/idle/idle_simple/sample-128.png">
</div>

＆＃13;

Answer 2

你可以将它添加到你的img中：

.create-option-thumb-img img {
  box-shadow: 0px 0px 40px 0px red;
}

你不需要z-index和类似的东西。 JSFiddle

你总是可以检查元素并使用CSS属性来获得正确的组合：）

Answer 3

您只需更改框阴影线即可获得所需的结果：

box-shadow: 0px 0px 40px 20px rgba(0, 0, 0, 0.05);

第一个和第二个数字代表阴影的x和y偏移，它应该是0，因为阴影直接位于图像下方。

第三个数字是模糊距离，即边框模糊的程度。

第四个数字是阴影大小，所以这个数字越大，阴影就越大。

最后一个属性值是现在设置为黑色（0,0,0）且不透明度为0.05的颜色。不透明度越低，它与背景混合的越多。不透明度越高，它与背景融合的就越少。

.create-option-thumb-img {
    margin: 50px;
    box-shadow: 0px 0px 40px 20px rgba(0, 0, 0, 0.05);
}

.create-option-thumb-img img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    z-index: -1;
}

<div class="create-option-thumb-img">
   <img src="https://pbs.twimg.com/profile_images/447374371917922304/P4BzupWu.jpeg" />
</div>

Answer 4

试试这个css

.create-option-thumb-img img {
    -webkit-box-shadow: -1px 6px 75px 17px rgba(0,0,0,0.27);
    -moz-box-shadow: -1px 6px 75px 17px rgba(0,0,0,0.27);
     box-shadow: -1px 6px 75px 17px rgba(0,0,0,0.27);
 }

只是一个建议：

如果您希望自己可以使用并选择

，可以使用一些在线Box shadow css Generator

用于在线css生成器链接click me

Answer 5

在框阴影中尝试rgba值并将rgba第一个值设置为空

 <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/checkinInputCodeMember">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="7"
                android:orientation="vertical" />

            <androidx.appcompat.widget.AppCompatButton
                android:id="@+id/bttn_extends"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:textColor="@color/colorAccent"
                android:text="3"/>

            <androidx.appcompat.widget.AppCompatButton
                android:id="@+id/bttn_checkout"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:textColor="@color/colorAccent"
                android:text="2"/>

            <androidx.appcompat.widget.AppCompatButton
                android:id="@+id/checkinButtonScanQrCodeMember"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:text="1"
                android:textColor="@color/colorAccent"
                **android:visibility="gone"**/>


        </LinearLayout>

如何将盒子阴影添加到图像

5 个答案: