Question

我做了一个红色的svg形状，看起来像那样：

我需要在设计中使用这些形状，如下所示：

我已经在img标签中嵌入了这个svg文件，并试图用绝对/相对定位来定位它，结果就是：

它看起来很完美但是当我调整浏览器大小时，会发生这种情况：

我是HTML / CSS的新手，显然不知道我在做什么。也许这是接近它的错误方法......

所以这是我的HTML：

<section id="whatwedo">
        <div class="hat"><img src="img/hat.svg" alt="Startup" style="img-responsive;"></div>

        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h1 class="text-center">what we do</h1>
                    <p class="text-center">We offer a wide range of software development and design options from a simple web development to more complicated information systems. We ensure our customers get the right thing, done the right way.</p>
                </div>
                <!--end col-md-8 col-md-offset-2-->
            </div>
            <!--end row-->


            <div class="row fields">
                <div class="col-sm-4 development-field">
                    <img src="img/development.svg" alt="Development" style="width:90px;height:90px;" class="img-responsive center-block">
                    <h2 class="text-center">develop</h2>
                    <p class="small text-center">We take pride in our experience in developing Java and PHP applications with different technologies and frameworks.</p>
                    <button type="button" class="btn btn-link center-block blue" role="link" type="submit" name="op" value="Link 2">more</button>
                </div>
                <div class="col-sm-4 design-field">
                    <img src="img/design.png" alt="Design" style="width:90px;height:90px;" class="img-responsive center-block">
                    <h2 class="text-center">design</h2>
                    <p class="small text-center">Beauty. Simplicity. Delight. We create beautiful user experiences to solve our customers’ business problems.</p>
                    <button type="button" class="btn btn-link center-block blue" role="link" type="submit" name="op" value="Link 2">more</button>
                </div>
                <div class="col-sm-4 startup-field">
                    <img src="img/startup.svg" alt="Startup" style="width:90px;height:90px;" class="img-responsive center-block">
                    <h2 class="text-center">startup</h2>
                    <p class="small text-center">We love being a part of new innovation and help your startup succeed by developing the technology you need to push forward.</p>
                    <button type="button" class="btn btn-link center-block blue" role="link" type="submit" name="op" value="Link 2">more</button>
                </div>
            </div>
            <!--end row fields-->
        </div>
        <!--end container-->

    </section>
    <!--end whatwedo-->

这是CSS：

/*what we do*/

.fields {
    margin-top: 64px;
}

.development-field img,
.design-field img,
.startup-field img {
    margin-bottom: 32px;
}

#aboutprocess {
    margin-top: 64px;
    padding: 64px 0;
    background: url(../img/tech_bg.jpg) repeat center center fixed;
    width: 100%;
    height: 344px;
    background-size: contain;
}

#aboutprocess p {
    color: #ffffff;
    padding-top: 60px;
}

.hat {
    width: 100%;
    position: absolute;
    left: 0;
    top: -110px;
}

#whatwedo {
    position: relative;
}

我希望你们能帮助我。我已经做了3个小时了，我觉得我很快就会发疯。这也是演示页面的link。谢谢。

Answer 1

根据你所说的，我做了sample。我对HTML和CSS结构做了一些小改动。

我以任何方式帮助过你

＆＃13;

#reshape x from 2d to 4d

x_image = tf.reshape(x, [-1, 28, 28, 1]) #[num_samples, width, height, channel_num]

## define the shape of weights and bias
w_shape = [5, 5, 1, 32] #patch_w, patch_h, in_channel, output_num(out_channel)
b_shape =          [32] #bias only need to be consistent with output_num

## init weights of conv1 layers
W_conv1 = weight_variable(w_shape)
b_conv1 = bias_variable(b_shape)

## first layer x_iamge->conv1/relu->pool1

#Our convolutions uses a stride of one 
#and are zero padded 
#so that the output is the same size as the input
h_conv1 = tf.nn.relu(
    conv2d(x_image, W_conv1) + b_conv1
                    )

print 'conv1.shape=',h_conv1.get_shape() 
## conv1.shape= (?, 28, 28, 32) 
## I thought conv1.shape should be (?, (28-5)/1+1, 24 ,32)

h_pool1 = max_pool_2x2(h_conv1) #output 32 num
print 'pool1.shape=',h_pool1.get_shape() ## pool1.shape= (?, 14, 14, 32)

＆＃13;

#home {
  width: 100%;
  height: 100vh;
	position: relative;
  background: linear-gradient( rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url("http://dolm.ragne.me/img/landing_bg.jpg") no-repeat 0 0 fixed;
  background-size: cover;
}
.hat {
	width: 100%;
  height: 130px;
	background: url("http://dolm.ragne.me/img/hat.svg") no-repeat center bottom;
  background-size: contain;
  position: absolute;
  bottom: 0;
}

＆＃13;

将形状定位到网站

1 个答案: