html - 阴影使图像 flex-6ren

html - 阴影使图像 flex

转载作者：行者123 更新时间：2023-11-28 05:34:45

25

4

请引用图片。如图所示，我想通过给它阴影来垂直 flex 图像。尝试了很多但无法得到它。

<html>
<head>
   <title></title>
   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

   <!-- jQuery library -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

   <!-- Latest compiled JavaScript -->
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <style type="text/css">
 .main{
    background-image: url('http://www.detaildesignonline.com/contentimages/sky1285264350.jpg');
    min-height: 600px;
    border-bottom-style: solid;
    border-bottom-color: rgba(4,58,106,1);
    border-bottom-width: 10px;  
}
.heading{
    font-weight: 900;
    color:#004B81;
}
.more{
    color:rgba(159,67,66,1);
}
.leftForm{
    background-color: rgba(224,237,222,1);
    height: 350px; 
}
.rightForm{
    background-color: rgba(253,253,253,0.7);
    height: 350px;
}

</style>
</head>
<body>
<div style="height:10px; background-color:orange"></div>
    <div class="row">
        <div class="col-sm-1">
        </div>
        <div class="col-sm-10">
            <div><img src="http://tollfreecustomercarenumber.com/wp-content/uploads/2015/11/ICICI-bank.jpg" height="100px" width="250px"></div>
            <div class=""></div>
        </div>
        <div class="col-sm-1"></div>
    </div>  
    <div class="row">
        <div class="col-sm-1">
        </div>
        <div class="col-sm-10 main">
            <div class="col-sm-1">

            </div>
            <div class="col-sm-11">
                <h3 class="heading">We've got all your Forex needs covered!</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae mi et leo tristique <br>tincidunt ac nec est. Aenean volutpat mauris vitae erat ultricies varius.</p>
                <p><b class="more">What's more? </b><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas <br>vitae mi et leo tristique tincidunt ac nec est.</b></p>
            </div>
            <div class="col-sm-1"></div>
            <div class="col-sm-5 leftForm">
                    <form role="form">
                    <br>
                    <h3 style="color:rgba(159,67,66,1); margin-top:0px">Sign In</h3>
                      <div class="form-group col-xs-8">
                        E-Mail ID
                        <input type="email" style="border: 2px solid orange;" class="form-control" id="email">
                      </div>
                      <div class="form-group col-xs-8">
                        Password
                        <input type="password" style="border: 2px solid orange;" class="form-control" id="pwd">
                      </div>
                      <div class="col-xs-12">
                      <input type="submit" class="btn btn-default" style="background-color:rgba(159,67,66,1); color:white" value="LOG IN"></input><br>
                      <small style="color:rgba(159,67,66,1)"><u><a  style="color:rgba(159,67,66,1)" href="#">Forgot Password?</a></u></small>
                      </div>    
                    </form>
                </div>
                <div class="col-sm-5 rightForm">
                    <form role="form">
                    <br>
                    <h3 style="margin-top:0px">Sign Up</h3>
                      <div class="form-group col-xs-8">
                        *E-Mail ID
                        <input type="email" class="form-control" id="email">
                      </div>
                      <div class="form-group col-xs-8">
                        *Password
                        <input type="password" class="form-control" id="pwd">
                      </div>
                      <div class="form-group col-xs-8">
                        *Re-enter Password
                        <input type="password" class="form-control" id="pwd">
                      </div>
                      <div class=" col-xs-12">
                      <button type="submit" class="btn btn-default" style="background-color:rgba(102,102,102,1); color:white">SIGN UP</button>
                      </div>
                    </form>
                </div>
                <div class="col-sm-1"></div>
                <!-- <p style="height:10px; bottom:0px; background-color:rgba(4,58,106,1)"></p> -->
                </div>
        <div class="col-sm-1"></div>
    </div>
    <div class="row">
        <div class="col-sm-1">
        </div>
        <div class="col-sm-10">
        <br>
            <div style="line-height:23px"><p style="color:rgba(102,102,102,1); font-size:12px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae mi et leo tristique tincidunt ac nec est. Aenean volutpat mauris vitae erat ultricies varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae mi et leo tristique tincidunt ac nec est. Aenean volutpat mauris vitae erat ultricies varius. Aenean volutpat mauris vitae erat ultricies varius. Lorem ipsum dolor sit amet</p></div>
            <div class=""></div>
        </div>
        <div class="col-sm-1"></div>
    </div>

请引用我想通过阴影垂直 flex 的图像。也请解释一下逻辑。

最佳答案

只需使用 perspective property在盒子阴影上。

这是要追加的 CSS 示例:

.main:after{
    content: '';
    position:absolute;
    z-index:-1;
    bottom:0px;
    width:50%;
    left:50%;
    margin-left:-47%;
    height:30px;
    box-shadow: 0 16px 30px -5px rgba(0, 0, 0, 1);
    -webkit-transform: perspective(800px) rotateY(0deg) rotateX(45deg);
    -moz-transform: perspective(800px) rotateY(0deg) rotateX(45deg);
    -ms-transform: perspective(800px) rotateY(0deg) rotateX(45deg);
    -o-transform: perspective(800px) rotateY(0deg) rotateX(45deg);
    transform: perspective(800px) rotateY(0deg) rotateX(45deg);
    margin-left:-62%;
    -webkit-transform: perspective(300px) rotateY(-40deg) rotateX(50deg);
    -moz-transform: perspective(300px) rotateY(-40deg) rotateX(50deg);
    transform: perspective(300px) rotateY(-40deg) rotateX(50deg);
}

我认为改编它是你的工作。

关于html - 阴影使图像 flex ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38294711/

25

4

0

文章推荐： c++ - 在 Qt 中使用 toFloat() 更正输入值

文章推荐： ios - 将 MFSideMenu 3rd 方库添加到 swift 项目

文章推荐： c++ - 从片段着色器返回 float

XNA 阴影？
如何在 XNA 中用图元(线条)制作的矩形周围制作阴影效果？我目前正在制作我的矩形，方法是将图元放入我制作的批处理中，然后添加纹理作为它们的背景。这些矩形应该象征着“ window ”。我希望它们也
opengl - 漫射光/阴影
我刚刚在引擎中安装了照明系统。在以下屏幕截图中，您可以看到一个亮起的指示灯(黄色方框): 考虑到在照亮场景的光线之上，它还实现了FOV，该FOV将遮挡视场之外的任何物体。这就是为什么阴影的左侧部分看起
java - 在本地jar到gradle项目中的阴影/阴影
我是不熟悉Gradle并尝试编译我的项目的新手，但是也“阴影化”(就像在maven中一样)本地jar文件。我正在尝试使用gradle shadow插件，但是当我运行“shadowJar”时，它并没有
JavaScript map 阴影
用 JavaScript 编写解析器，对于任何语言，显然都使用 Map 来存储名称到变量的映射。大多数语言允许以某种方式或内部作用域中的另一个变量遮蔽外部作用域中的变量。实现这一点的理想数据结构是功
C++ 继承相同类型签名的成员函数(阴影)
// Shadowing #include using namespace std; const int MNAME = 30; const int M = 13; class Pers
Android 导航栏和状态栏高程/阴影
我想设置我的导航栏和状态栏，就像下面链接中图片中的示例一样。我怎么能这样做 see the example 最佳答案您可以通过像这样设置样式属性来简单地做到这一点: se
java - 阴影/变量范围
我以为我理解阴影的概念。但是这段代码让我想知道: public class Counter { int count = 0; public void inc() { count++; } pu
ios - UINavigationController 阴影
尝试遵循概述的方法 here为我的 UINavigationController 添加阴影。但是，该方法似乎不起作用。这是我使用的代码: - (void)viewDidLoad { [sup
ios - UITableViewCell 阴影
如何给 UITableViewCell 上下两边添加阴影？我试过这个: cell.layer.shadowOpacity = 0.75f; cell.layer.shadowRadius = 5.0
html - 光标上奇怪的不透明度/阴影？
我有一个博客，我为它制作了自定义光标，但它们并不是我想要的样子。使用一些免费的光标编辑程序制作光标，它们看起来只有一种颜色，没有边框、黑色或阴影。即使以图片形式上传后，在线.png 文件看起来也没有阴
css - 饼图 - 阴影
我能得到像这张附图那样的带阴影的饼图吗？如果是，怎么办？这是饼图的代码: 最佳答案遗憾的是，Kendo UI 饼图不支持任何 3D 元素。您可以在 Telerik 论坛中阅读相关信息 he
CSS 阴影 :inset
我一直试图获得给定的 curl 阴影效果 here对于 box-shadow:inset 但没有得到任何东西。任何onw有任何线索我可以让它工作吗？一直试图让它在这个上工作jsfiddle 将其更
javascript - 单击后保留边框/阴影
我正在构建一个类似商店的东西，所以我有产品，侧面有圆形按钮，当我点击它们时，它会改变产品的颜色。一切都很完美，但我希望当我单击按钮时，按钮保持高亮状态。代码: CSS: #but1 { posi
html - 中底框-阴影
我想创建一个底部边框下方有框显示的 H2 这是我的“基本”代码: My H2 #toto{ box-shadow: 0 4px 2px -2px gray; } 但我想
css - 如何删除列表中元素之间的空格/阴影
我有一个包含卡片列表的模板: --> {{event.eventTitle}} {{event.eve
CSS 阴影(如何摆脱顶部阴影？)
CSS 阴影有问题。我不知道如何摆脱这里的顶部阴影:http://i.imgur.com/5FX62Fx.png 我得到的: box-shadow: 0 -3px 4px -6px #777, 0 3
java - 如何删除状态栏和主屏幕之间的分隔线/阴影？
在我的应用程序中，我想保留状态栏但使其背景与主屏幕相同。所以我创建了一个自定义主题来设置应用程序背景: @drawable/background_shelf true
android ListView 阴影
滚动 ListView 时如何去除阴影。我在列表的顶部和底部出现了阴影。最佳答案关于android ListView 阴影，我们在Stack Overflow上找到一个类似的问题： https
iOS:MaterialComponents 阴影
我想在我的 Swift 4 中使用 MaterialComponents 为我的 View 添加阴影，但我不明白如何使用阴影电梯。我创建了一个名为 ShadowedView 的类，类似于 docume
ios - CAShapeLayer 阴影
给定以下 CAShapeLayer 是否可以在提示处添加如下图所示的阴影？我正在使用 UIBezierPath 来绘制条形图。 - (CAShapeLayer *)gaugeCircleLayer

首页

博学

6Ren·AI

商城

html - 阴影使图像 flex