CSS：在填充内设置内联元素

Question

我正在查看Instagram网站。我注意到他们在相邻输入的填充内放了一个缩放图标。我想知道这是怎么做到的，有人可以给我举个例子吗？

谢谢。

Answer 1

以下是根据您的参考，#include <opencv2/opencv.hpp> #include <iostream> #include <vector> #include <string> #include <fstream> #include "kcf.hpp" using namespace cv; using namespace std; std::vector<cv::Rect> GetGroundtruth(std::string txt_file); std::vector<double>PrecisionCalculate(std::vector<cv::Rect> groundtruth_rect, std::vector<cv::Rect> result_rect); int main(int argc, char **argv) { if (argc != 3) { std::cout << "Usage:" << argv[0] << " video_base_path[.wittos] Verbose[0/1]" << std::endl; return 0; } std::string video_base_path = argv[1]; std::string pattern_jpg = video_base_path+ "/img/*.png"; std::string pattern_png = video_base_path+ "/img/*.png"; std::vector<cv::String> image_files; cv::glob(pattern_jpg, image_files); if (image_files.size() == 0) cv::glob(pattern_png, image_files); if (image_files.size() == 0) { std::cout << "No image files[jpg png]" << std::endl; return 0; } std::string txt_base_path = video_base_path + "/groundtruth_rect.txt"; std::vector<cv::Rect> groundtruth_rect; groundtruth_rect = GetGroundtruth(txt_base_path); cv::Mat image; std::vector<cv::Rect> result_rect; int64 tic, toc; double time = 0; bool show_visualization = argc == 1? atoi(argv[1]) : true; std::string kernel_type = "gaussian";//gaussian polynomial linear std::string feature_type = "hog";//hog gray KCF kcf_tracker(kernel_type, feature_type); for(unsigned int frame = 0; frame < image_files.size(); ++frame) { image = cv::imread(image_files[frame]); tic = getTickCount(); if (frame == 0) { kcf_tracker.Init(image, groundtruth_rect[0]); result_rect.push_back(groundtruth_rect[0]); //0-index } else { result_rect.push_back(kcf_tracker.Update(image)); } toc = cv::getTickCount() - tic; time += toc; if (show_visualization) { cv::putText(image, to_string(frame+1), cv::Point(20, 40), 6, 1, cv::Scalar(0, 255, 255), 2); cv::rectangle(image, groundtruth_rect[frame], cv::Scalar(0, 255, 0), 2); cv::rectangle(image, result_rect[frame], cv::Scalar(0, 255, 255), 2); cv::imshow(video_base_path, image); char key = cv::waitKey(1); if(key == 27 || key == 'q' || key == 'Q') break; } } time = time / double(getTickFrequency()); double fps = double(result_rect.size()) / time; std::vector<double> precisions = PrecisionCalculate(groundtruth_rect, result_rect); printf("%12s - Precision (20px) : %1.3f, FPS : %4.2f\n", video_base_path.c_str(), precisions[20], fps); cv::destroyAllWindows(); return 0; } std::vector<cv::Rect> GetGroundtruth(std::string txt_file) { std::vector<cv::Rect> rect; ifstream gt; gt.open(txt_file.c_str()); if (!gt.is_open()) std::cout << "Ground truth file " << txt_file << " can not be read" << std::endl; std::string line; int tmp1, tmp2, tmp3, tmp4; while (getline( gt, line)) { std::replace(line.begin(), line.end(), ',', ' '); stringstream ss; ss.str(line); ss >> tmp1 >> tmp2 >> tmp3 >> tmp4; rect.push_back( cv::Rect(--tmp1, --tmp2, tmp3, tmp4) ); //0-index } gt.close(); return rect; } std::vector<double> PrecisionCalculate(std::vector<cv::Rect>groundtruth_rect, std::vector<cv::Rect>result_rect) { int max_threshold = 200; std::vector<double> precisions(max_threshold + 1, 0); if (groundtruth_rect.size() != result_rect.size()) { int n = min(groundtruth_rect.size(), result_rect.size()); groundtruth_rect.erase(groundtruth_rect.begin()+n, groundtruth_rect.end()); result_rect.erase(result_rect.begin() + n, result_rect.end()); } std::vector<double> distances; double distemp; for (unsigned int i = 0; i < result_rect.size(); ++i) { distemp = sqrt(double(pow((result_rect[i].x + result_rect[i].width / 2) - (groundtruth_rect[i].x + groundtruth_rect[i].width / 2), 2) + pow((result_rect[i].y + result_rect[i].height / 2) - (groundtruth_rect[i].y + groundtruth_rect[i].height / 2), 2))); distances.push_back(distemp); } for (int i = 0; i <= max_threshold; ++i) { for (unsigned int j = 0; j < distances.size(); ++j) { if (distances[j] < double(i)) precisions[i]++; } precisions[i] = precisions[i] / distances.size(); } return precisions; } 搜索框上焦点显示隐藏图标示例。我希望这个答案会有所帮助。

jQuery

$('.btn-close').hide();
$('.fa-search').show();
$('.input-text').on('focus', function() {
    $(this).siblings('.btn-close').show();
    $(this).siblings('.fa-search').hide();
});
$('.btn-close').click(function(e) {
    $('.fa-search').show();
    $('.btn-close').hide();
    e.stopPropagation();
});
$('.input-text').on('focusout', function() {
    $(this).siblings('.btn-close').hide();
    $(this).siblings('.fa-search').show();
});

.input-text {
    border: 1px solid #888;
    min-height: 40px;
    font-size: 16px;
    padding: 0 25px 0 5px;
}

.input-box {
    position: relative;
    display: inline-block;
}

.input-box .fas,
.btn-close {
    position: absolute;
    right: 0;
    padding: 11px 4px;
    top: 0;
    color: #888;
}

Answer 2

答案是，他们实际上并未将图标放在输入框中。只需在图标和Content-Type: 'application/json'周围绘制一个矩形。图标本身将添加到问题图像中突出显示的<input>之后的行的<span>中。寻找类<input>。

当我检查coreSpriteSearchIcon时，发现应用了以下样式：

<span>

background-image: url(/static/bundles/metro/sprite_core_2x_6ba81dcece9b.png/6ba81dcece9b.png); } background-size: 410px 396px; background-position: -240px -366px; height: 10px; width: 10px; 是Sprite文件（一个包含多个较小图像的图像）。 background-image确保未拉伸图像。 background-size会告诉您在较大的Sprite图片中的哪里可以找到搜索图标。并且，background-position和width告诉您要显示多少图像。

通过使用height定位，他们能够将其放置在原处：

absolute

Answer 3

实现此目的的一种方法是使用position: absolute并将输入放入包装器中。让我告诉你：

.input-wrapper {
  position: relative;
}

.input-wrapper img {
  position: absolute;
  top: 5px;
  left: 5px;
}

input {
  height: 40px;
  width: 200px;
  padding-left: 35px;
  
  font-size: 20px;
  
  box-sizing: border-box;
}

<div class="input-wrapper">
  <img src="https://picsum.photos/30"/>
  <input type="text" />
</div>

因此，基本上，我们使用position: relative将img相对于其移动。另请注意，您必须添加额外的padding（在这种情况下为左），这样文本就不会与图标重叠。

有很多方法可以做到这一点：position: relative，否定margin，background-image，利用伪元素，但是绝对定位在我看来是最正确的语义